How to Rotate the Texts Using CSS

1. Use the CSS transform Property to Rotate Text
2. Use the CSS writing-mode Property to Rotate Texts

In this article, we will use CSS to rotate the HTML texts. Many languages, such as Chinese, Japanese, or Korean, use the rotated text frequently.

Also, while designing web pages, developers may need to rotate text by some degrees to make the user interface more attractive. Here, we have used two different methods to rotate the texts.

Use the CSS transform Property to Rotate Text

In the example below, we have created the div element and given it the element-text class name for identification. Inside the div element, we have created the <span> element and added the text inside that.

Example Code:

<div class="example-text">
    <span>Rotated texts.</span>
</div>

Now, to rotate all texts of the <div> element, we have accessed the div using its class name in CSS.

Next, we applied the transform: rotate(-90deg) CSS property to the div element to rotate the entire content. However, we have used -webkit-transform: rotate(-90deg); to rotate text in the Chrome browser, -moz-transform: rotate(-90deg); to rotate text in the Firefox browser, and the same as -o-transform: rotate(-90deg); for Opera.

Also, we have applied some additional CSS to set the position of the div element at the top. Here, Position: absolute means the div element’s position will change relative to its parent, which is the document body itself.

.example-text {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    position: absolute;
    top: 40px;
}

In the below output, users can see that text is rotated by 90 degrees in the anti-clockwise direction.

If we pass the positive degree value as an argument of the rotate() method, it rotates the content or texts in the clockwise direction that users can learn via the example below.

.example-text {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    position: absolute;
    top: 40px;
}

<div class="example-text">
    <span>Rotated texts.</span>
</div>

Use the CSS writing-mode Property to Rotate Texts

The writing-mode CSS property helps us change the text’s orientation. Using it, we can rotate the text by 90 or -90 degrees.

We can use the verticle-rl as a value of the writing-mode property to rotate text such that the user can read text from right to left and top to bottom.

In the example below, we have created the <p> HTML tag, which contains some text that we have rotated using the writing-mode: vertical-rl CSS property.

Example Code:

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

.text{
    writing-mode: vertical-rl;
    height: 200px;
}

If we use the verticle-lr as a value of the writing-mode property, it rotates the text such that text can be readable from left to right and top to bottom.

.text{
    writing-mode: vertical-lr;
    height: 200px;
}

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

The above output lets users read the text from left to right and top to bottom.

We have learned different methods to rotate the text. The first method allows programmers to rotate text by any number of degrees.

Using the second method, programmers can rotate text by 90 degrees and make it readable from left to right or right to left. So, it is recommended to use the first method.