DEV Community

Farhan Malik
Farhan Malik

Posted on

How to rotate text in 90 degrees with CSS.

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 */
}

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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 */
}

Enter fullscreen mode Exit fullscreen mode

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 */
}

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)