How to rotate text in 90 degrees with CSS.

Farhan Malik — Sun, 18 Dec 2022 18:09:58 +0000

To rotate text in 90 degrees with CSS, you can use the transform property with the rotate function.

Here's an example of how you can use it:

.rotate {
  transform: rotate(90deg); /* Rotate the text 90 degrees */
}

You can then apply this class to any element that contains text that you want to rotate, like this:

<div class="rotate">Text to rotate</div>

If you want to rotate the text in the other direction, you can use a negative angle value, like this:

.rotate {
  transform: rotate(-90deg); /* Rotate the text -90 degrees */
}

You can also use the transform-origin property to specify the point around which the transformation should be applied. For example, to rotate the text around its center, you can use the following CSS:

.rotate {
  transform: rotate(90deg);
  transform-origin: center; /* Rotate the text around its center */
}

Note that the transform property is supported in all modern browsers, but it is not supported in Internet Explorer 8 and earlier versions.

DEV Community: Farhan Malik

How to rotate text in 90 degrees with CSS.