CSS Rotate Text

The text on a web page can be rotated with the help of CSS. Rotating the text helps style the web page and attract viewers. There are many methods to rotate the text. In this article, we are going to study the CSS rotate text.

Following are the CSS text rotate properties that are used to rotate the text on the web page:

Using writing-mode
Using text-orientation
Using rotate property
Using transform property with value rotate() function

Let us learn all properties one by one.

1. Using Writing-mode

The first property is using the "writing-mode".

Syntax:

writing-mode: horizontal-tb | vertical-lr | vertical-rl | sideways-lr | sideways-lr| inherit| initial;

In the above syntax, "writing-mode" is the CSS property. There are many values that this property takes, which are as follows:

Horizontal-tb: When this value is given to the writing-mode then it places the texts horizontally from left to right for the left-to-right scripts and it places the texts horizontally from right to left for the right-to-left scripts.
Vertical-lr: When this value is given to the "writing-mode" property, then it places the texts vertically from top to bottom for the left-to-right scripts and places the next vertical line to the left of the previous line. It places the texts vertically from bottom to top for the right-to-left scripts and places the next vertical line to the right of the previous line.
Vertical-rl: When this value is given to the "writing-mode" property, then it places the texts vertically from top to bottom for the left-to-right scripts and places the next vertical line to the right of the previous line. It places the texts vertically from bottom to top for the right-to-left scripts and places the next vertical line to the left of the previous line.
Sideways-lr: When this value is given to the "writing-mode" property, then it places the texts vertically from bottom to top for the left-to-right scripts, and it places the texts horizontally from top to bottom for the right-to-left scripts. It shifts the text towards the left.
Sideways-rl: When this value is given to the "writing-mode" property, the texts are placed vertically from top to bottom for the left-to-right scripts and horizontally from bottom to top for the right-to-left scripts. It shifts the text towards the right.
Inherit: It is used to inherit the CSS writing-mode property of the parent.
Initial: It is used to set the default value of the CSS writing-mode property.

Demonstration of "writing-mode" CSS Property

Let's examine the use of the "writing-mode" property using the following example. We will use all writing-mode property values to show the various text rotations.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demonstration of CSS property writing-mode to rotate the text</title>
    <style>
        section { 
            width: 600px;
            margin: 20px auto; 
        }

            div {
            display: block;
            position: relative;
            margin: 100px 0;
        }

            div p{
            padding: 12px;
            margin-left: 120px;
        }
        .first {
            position: absolute;
            font: bold 12px Courier;
            letter-spacing: 2px;
            background: #06756f;
            color: #fcefef;
            padding: 25px 5px;
            line-height: 24px;
            writing-mode: vertical-rl;
        }
        .second {
            position: absolute;
            font: bold 12px Courier;
            letter-spacing: 2px;
            background: #06756f;
            color: #fcefef;
            padding: 25px 5px;
            line-height: 24px;
            writing-mode: vertical-lr;
        }
        .third {
            position: absolute;
            font: bold 12px Courier;
            letter-spacing: 2px;
            background: #06756f;
            color: #fcefef;
            padding: 25px 5px;
            line-height: 24px;
            writing-mode: sideways-rl;
        }
        .fourth {
            position: absolute;
            font: bold 12px Courier;
            letter-spacing: 2px;
            background: #06756f;
            color: #fcefef;
            padding: 25px 5px;
            line-height: 24px;
            writing-mode: sideways-lr;
        }
        .fifth {
            position: absolute;
            font: bold 12px Courier;
            letter-spacing: 2px;
            background: #06756f;
            color: #fcefef;
            padding: 25px 5px;
            line-height: 24px;
            writing-mode: horizontal-tb;
        }
    </style>
</head>
<body>
    <h1>Rotating text utilizing the writing-mode property</h1>
    <section>
        <div>
            <h3 class="first">Rotating text vertical-rl</h3>
            <p>This paragraph has a heading called "Rotating text vertical-rl" which is rotated using the "writing-mode: vertical-rl".</p>
        </div>
    <section>
        <div>
            <h3 class="second">Rotating text vertical-lr</h3>
            <p>This paragraph has a heading called "Rotating text vertical-lr" which is rotated using the "writing-mode: vertical-lr".</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="third">Rotating text sideways-rl</h3>
            <p>This paragraph has a heading called "Rotating text sideways-rl" which is rotated using the "writing-mode: sideways-rl".</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="fourth">Rotating text sideways-lr</h3>
            <p>This paragraph has a heading called "Rotating text sideways-lr" which is rotated using the "writing-mode: sideways-lr".</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="fifth">Rotating text horizontal-tb</h3>
            <p>This paragraph has a heading called "Rotating text horizontal-tb" which is rotated using the "writing-mode: horizontal-tb".</p>
        </div>
    </section>
</body> 
</html>

Output:

Here in the output we can witness the use of writing-mode property with different values that show the different text rotation.

2. Using Text-orientation

The second property uses the "text orientation." This property is used when the "writing-mode" property is set, which means the "writing-mode" property is mandatory for using the "text-orientation" property.

Syntax:

"writing-mode" and "text-orientation" are the CSS properties in the above syntax. There are various values that the "text-orientation" property takes, which are given below:

Upright: This value is used to set the characters to be in an upright manner and the characters are not rotated.
Mixed: This value is used to rotate the characters to 90 degrees in the clockwise direction.
Sideways: This value is supported by the Firefox browser only. It rotates the characters clockwise to 90 degrees, orienting them the same way text lines are oriented.
Use-glyph-orientation: This value is used to use the deprecated SVG properties glyph-orientation-horizontal and glyph-orientation-vertical in the SVG elements.
Sideways-right: This value's work is the same as that of the sideways value, but it is utilized for compatibility purposes.
Inherit: It is utilized to inherit the CSS text-orientation property of the parent.
Initial: It is used to set the default value of the CSS text-orientation property.

Demonstration of "text-orientation" CSS Property

Let us look at the demonstration of using the text-orientation property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rotating text utilizing the text-orientation property</title>
    <style>
        section { 
            width: 650px; 
            margin: 5px auto;
        }

        div {
            display: block;
            position: relative;
            margin: 110px 0;
        }
        div p{
            padding: 15px;
            padding-top: 45px;
            margin-left: 175px;
        }

        .one {
            position: absolute;
            letter-spacing: 4px;
            padding: 30px 20px;
            font: bold 15px Sans-Serif;
            background: #43066d;
            color: #f9d6d6;
            writing-mode: vertical-rl;
            line-height: 25px;
            text-orientation: mixed;
        }
        .two {
            position: absolute;
            letter-spacing: 4px;
            padding: 30px 20px;
            font: bold 15px Sans-Serif;
            background: #690aa8;
            color: #f9d6d6;
            writing-mode: vertical-rl;
            line-height: 32px;
            text-orientation: upright;
        }
        .three {
            position: absolute;
            letter-spacing: 4px;
            padding: 30px 20px;
            font: bold 15px Sans-Serif;
            background: #870ed8;
            color: #f9d6d6;
            writing-mode: vertical-rl;
            line-height: 32px;
            text-orientation: sideways;
        }
        .four {
            position: absolute;
            letter-spacing: 4px;
            padding: 30px 20px;
            font: bold 15px Sans-Serif;
            background: #a22fef;
            color: #f9d6d6;
            writing-mode: vertical-rl;
            line-height: 32px;
            text-orientation: use-glyph-orientation;
        }
        .five {
            position: absolute;
            letter-spacing: 4px;
            padding: 30px 20px;
            font: bold 15px Sans-Serif;
            background: #b963f3;
            color: #f9d6d6;
            writing-mode: vertical-rl;
            line-height: 32px;
            text-orientation: sideways-right;
        }
    </style>
</head>
<body>
    <h1>Rotating text with the help of the text-orientation property</h1>
    <section>
        <div>
            <h3 class="one">text-orientation: mixed</h3>
            <p>We will rotate the heading of this paragraph utilizing the text-orientation property with value as mixed</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="two">text-orientation: upright</h3>
            <p>We will rotate the heading of this paragraph utilizing the text-orientation property with the value as upright</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="three">text-orientation: sideways</h3>
            <p>We will rotate the heading of this paragraph using the text-orientation property with value as sideways</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="four">text-orientation: use-glyph-orientation</h3>
            <p>We will rotate the heading of this paragraph utilizing the text-orientation property with value as use-glyph-orientation</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="five">text-orientation: sideways-right</h3>
            <p>We will rotate the heading of this paragraph using the text-orientation property with value as sideways-right</p>
        </div>
    </section>
</body>
</html>

Output:

Here is the output. We can witness the text-orientation property with different values that show the various types of text rotation.

3. Using Rotate Property

The third property to rotate the text is the "rotate" CSS property.

Syntax:

"rotate" is the CSS property in the above syntax. The values that the "rotate" property takes are given below:

None: This value is the default value, i.e., automatically assigned value.
Axis: This tells the axis to which you want to rotate the text, such as the x-axis, y-axis, or z-axis. If the axis is not specified, then the z-axis is set by default.
Angle: This means the angle to which you require the text to be rotated, such as rad, turn, and degree.
Vector-angle: It uses three numbers to rotate the text: x-coordinate, y-coordinate, and z-coordinate. These numbers are used with angle, which defines how much angle the text is to be rotated.
Inherit: It is utilized to inherit the CSS rotate characteristics of the parent.
Initial: It is utilized to specify the default value of the CSS rotate property.

Demonstration of "rotate" CSS Property

We are going to comprehend the "rotate" property in this demonstration.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration to rotate the text with the help of the CSS rotate property</title>
    <style>
        section { 
            width: 500px; 
            margin: 10px auto;
        }

        div {
            margin: 75px 0;
            position: relative;
        }

        div p{
            padding: 40px;
            padding-top: 75px;
            margin-left: 55px;
        }

        .rotate1 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: -30deg;
        }
        .rotate2 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: 10deg;
        }
        .rotate3 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: 1 1 0 45deg;
        }
        .rotate4 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: y -180deg;
        }
        .rotate5 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: x 60deg;
        }
        .rotate6 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            rotate: z -30deg;
        }
    </style>
</head>
<body>
    <section>
        <div>
            <h3 class="rotate1">rotate: -30deg</h3>
            <p>This paragraph's heading demonstrates the text rotated to -30deg.</p>

            <h3 class="rotate2">rotate: 10deg</h3>
            <p>The paragraph's heading shows the text rotated to 10deg.</p>

            <h3 class="rotate3">rotate: 1 1 0 45deg</h3>
            <p>The heading of this paragraph displays the rotated text with the assistance of the "rotate: 1 1 0 45deg" property.</p>

            <h3 class="rotate4">rotate: y -180deg</h3>
            <p>The heading of this paragraph displays the rotated text with the help of the "rotate: y -180deg" property.</p>

            <h3 class="rotate5">rotate: x 60deg</h3>
            <p>The paragraph's heading illustrates the rotated text utilizing the "rotate: x 60deg" property.</p>

            <h3 class="rotate6">rotate: z 60deg</h3>
            <p>The heading of this paragraph demonstrates the rotated text with the use of the "rotate: z 60deg" property.</p>
        </div>
    </section>
</body>
</html>

Output:

Here, in the result, the use of the "rotate" property with distinct values that display the distinct text rotation can be witnessed.

4. Using Transform Property with Value Rotate() Function

The "transform" is the fourth property, which accepts the value as the rotate() function.

Syntax:

"transform" is the CSS property that we can witness in the above syntax. The values that this property accepts are given below:

None: This value is the automatic or default value.
Rotate (degree) function: It is the rotate function that we use to rotate the text, and it takes the value of a degree.

Demonstration of "transform: rotate()" CSS Property

We will illustrate how to rotate the text utilizing the transform property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rotating the text with the help of the transform property</title>
    <style>
        section { 
            width: 500px; 
            margin: 10px auto;
        }

        div {
            margin: 24px 0;
            position: relative;
        }

        div p{
            padding: 40px;
            padding-top: 90px;
            margin-left: 55px;
        }

        .rotate-text1 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            transform: rotate(-15deg);
        }
        .rotate-text2 {
            position: absolute;
            background: #bef16c;
            color: #ffffff;
            letter-spacing: 1px;
            font: bold 14px Sans-Serif;
            text-transform: uppercase;
            padding: 10px;
            line-height: 28px;
            transform: rotate(15deg);
        }
    </style>
</head>
<body>
    <h1>Rotating the text utilizing the transform property</h1>
    <section>
        <div>
            <h3 class="rotate-text1">transform: rotate(-15deg)</h3>
            <p>The heading of this paragraph is rotated to -15 degrees.</p>
        </div>
    </section>
    <section>
        <div>
            <h3 class="rotate-text2">transform: rotate(15deg)</h3>
            <p>The heading of this paragraph is rotated to 15 degrees.</p>
        </div>
    </section>
</body>
</html>

Output:

We can notice the text rotation using the transform property in the result below.

Browser Compatibility

Given below are the browsers that support all the properties discussed in this article:

Google Chrome
Firefox
Opera
Internet Explorer
Safari

Conclusion

In this article, we have understood the CSS rotate text. We have seen four CSS text rotate properties that are used to rotate the text, which are as follows: