Table of contents

Introduction

Syntax

Example

Text-orientation Values

4.1.

Syntax:

How Does Text Rotate Work in CSS?

More Examples

Example

Frequently Asked Questions

8.1.

Can I rotate text using CSS without rotating the entire element?

8.2.

How can I rotate text back to its original position?

8.3.

Can I rotate inline text elements?

8.4.

Are there any performance concerns with rotating text in CSS?

Conclusion

Last Updated: Jul 10, 2024

Easy

Rotate Text in CSS

Author Sinki Kumari

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

In web design, creative text effects can greatly enhance the visual appeal of a webpage. One such effect is rotating text, which can be used to create dynamic and interesting layouts. CSS provides simple yet powerful properties to rotate text elements on your webpage.

In this article, we will explore how to rotate text using CSS, covering the syntax, examples, text-orientation values, how it works, more advanced examples, and browser compatibility.

Syntax

To rotate text in CSS, we primarily use the transform property along with the rotate function. The basic syntax for rotating an element is as follows:

css

.element {
    transform: rotate(angle);
}

Here, angle is the degree to which you want to rotate the text. It can be a positive or negative value, measured in degrees (deg), radians (rad), gradians (grad), or turns (turn).

Example

Let's look at a simple example to understand how text rotation works in CSS.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotate Text Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="rotated-text">Rotated Text</div>
</body>
</html>

CSS (styles.css)

.rotated-text {
    font-size: 24px;
    transform: rotate(45deg); /* Rotates text by 45 degrees */
    width: 200px;
    margin: 100px auto;
    text-align: center;
    border: 1px solid #000;
    padding: 20px;
}

Output:

The text "Rotated Text" will be rotated by 45 degrees within its container.

Text-orientation Values

In addition to rotating elements, CSS also provides properties for text orientation, particularly within vertical writing modes. The writing-mode and text-orientation properties can be used to control the direction and orientation of text.

Syntax:

.element {
    writing-mode: vertical-rl; /* Vertical writing mode, right-to-left */
    text-orientation: upright; /* Text orientation */
}

Example:

CSS

.vertical-text {
    writing-mode: vertical-rl; /* Vertical writing mode, right-to-left */
    text-orientation: upright; /* Keeps text upright */
    font-size: 24px;
    border: 1px solid #000;
    padding: 20px;
}

HTML:

<div class="vertical-text">Vertical Text</div>

Output:

The text "Vertical Text" will be displayed vertically, but each character will remain upright.

How Does Text Rotate Work in CSS?

The transform: rotate() property is a CSS transform function that allows you to rotate an element around a fixed point on the 2D plane. When you apply this property to a text element, it rotates the entire element, including its content, by the specified angle. By default, the rotation occurs around the element's center, but you can change the pivot point using the transform-origin property.

Example with transform-origin:

css

.rotated-text {
    transform: rotate(45deg);
    transform-origin: top left; /* Changes the pivot point to the top-left corner */
}

In the example above, the text will rotate 45 degrees around its top-left corner instead of the default center.

More Examples

Rotating Text with Animation:

You can combine the rotate property with CSS animations to create dynamic rotating text effects.

HTML:

<div class="animated-rotated-text">Animated Rotated Text</div>

CSS:

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.animated-rotated-text {
    font-size: 24px;
    animation: rotateAnimation 5s infinite linear; /* Rotates text continuously */
    width: 200px;
    margin: 100px auto;
    text-align: center;
    border: 1px solid #000;
    padding: 20px;
}

Output:

The text "Animated Rotated Text" will continuously rotate 360 degrees in an infinite loop.

Combining Rotate with Other Transforms:

You can also combine the rotate function with other transform functions such as scale, translate, and skew to create complex transformations.

Example

css

.combined-transform-text {
    font-size: 24px;
    transform: rotate(30deg) scale(1.5) translate(50px, 50px);
    width: 200px;
    margin: 100px auto;
    text-align: center;
    border: 1px solid #000;
    padding: 20px;
}

HTML:

<div class="combined-transform-text">Combined Transform</div>

Output:

The text "Combined Transform" will be rotated by 30 degrees, scaled by 1.5 times, and translated 50 pixels horizontally and vertically.

Frequently Asked Questions

Can I rotate text using CSS without rotating the entire element?

No, the transform: rotate() property rotates the entire element, including its content. If you need to rotate only the text, you would have to apply the transform to the specific text element or use alternative methods like canvas for more granular control.

How can I rotate text back to its original position?

To reset the rotation, you can set the transform property to rotate(0deg).

Can I rotate inline text elements?

Yes, you can apply the transform: rotate() property to inline text elements like <span>, but it's important to ensure that the surrounding layout supports the transformation.

Are there any performance concerns with rotating text in CSS?

Generally, CSS transformations are hardware-accelerated, so performance impacts are minimal. However, excessive use of complex animations and transformations can affect performance, especially on lower-end devices.

Conclusion

Rotating text in CSS is a powerful technique for adding visual interest and dynamic effects to your web pages. By understanding the syntax and various properties associated with text rotation, you can create engaging and visually appealing layouts. Whether you're rotating text for stylistic purposes, creating vertical text, or combining transformations for more complex effects, the flexibility of CSS makes it all possible. Always consider browser compatibility and performance implications to ensure a smooth user experience.

You can also practice coding questions commonly asked in interviews on Coding Ninjas Code360.

Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

433+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

309+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

433+ registered

View more events