How to Rotate Text 90 Degrees in CSS

Normally, when text is added to a web page in a horizontal position on the display screen. However, CSS provides various ways to change the position of text according to preferences. We can also change the direction and angle of the text using CSS properties. More specifically, text can be rotated at 90 degrees.

This manual will teach you how to rotate text at 90 degrees. So, let’s get started!

How to Rotate Text 90 Degrees in CSS?

To rotate the text at 90 degrees in CSS, the “transform” property is used. Before using it, firstly, we will discuss this CSS property for a better understanding.

What is “transform” Property in CSS?

The “transform” property is used for the 2D and 3D transformation of any element. This property allows an element to rotate, move, skew and scale. You can also utilize this property for rotating the added text at 90 degrees.

Syntax

Syntax of the “transform” property is:

transform: none|transform-functions

Description of the above values are:

none: It is used to set no transformation on any element.
transform-functions: It can be used to specify different functions, such as rotate(), scale(), move() and skew().

Let’s move to the practical example to utilize the transform property for rotating text in 90 degrees.

Example: Rotating Text 90 degrees in CSS

In the <body> of HTML, we will add a heading and paragraph using <h1> and <p> tag, respectively:

<body>

<h1>Linuxhint</h1>

<p> rotation of text in 90 degree</p>

</body>

This will show the following output:

Now, we will move to the CSS and apply the “transform” property to it. To do so, use “p” to access the paragraph created in the HTML file. After that, use the transform property and set the angle of rotation as “90deg” in the rotate() function. Next, use the “transform-origin” property and set its value to ”left” to rotate the text in the clockwise direction. Moreover, we set the margin-left “70px” to give the margin from the left side of the paragraph, and for styling, set font-weight and font-size as “bolder” and “x-large”, respectively:

p{

transform:rotate(90deg);

transform-origin:left;

margin-left:70px;

font-weight:bolder;

font-size:x-large;

}

Note: Here, the “transform-origin” property is used to set the x-axis and y-axis of rotation.

After the implementation of the above code, go to the HTML and execute it to see the following outcome:

It can be observed that using the “transform” property, our text is successfully rotated at 90 degrees.

Conclusion

To rotate the text at 90 degrees, the “transform” property is used. The angle of the rotation is set according to the specified degree value. Using this, you can also define different angles of the text according to your choice. In this article, we have explained how to rotate text 90 degrees using the transform property with the help of an example.

How to Rotate Text 90 Degrees in CSS