DEV Community

Farhan Malik
Farhan Malik

Posted on

2

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.

Neon image

Serverless Postgres in 300ms (❗️)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (0)

AWS Industries LIVE! Stream

Business benefits of the cloud

Stream Industries LIVE! to explore innovative cloud solutions for modern businesses.

Learn More

👋 Kindness is contagious

If you found this post useful, please drop a ❤️ or a friendly comment!

Okay.