How Do You Rotate Text in CSS?

Brief about CSS

Before knowing about the CSS text rotate property, we have to understand what exactly is CSS. CSS stands for Cascading Style Sheet. With the help of CSS, we can target every HTML element present in the website and can manipulate and give desired design to them. CSS saves a lot of time while designing a web page as we can give styling to multiple elements and sections at once. In simple words, we can say that CSS is used to make a website more attractive and user-friendly.

Let’s see an example for a better understanding:

<!-- html code -->
<header>
<h2>CSS Selectors</h2>
</header>
<span>Universal Selector</span>
<div>
<li>This is list.</li>
<ol>
<li>item1</li>
<li>item2</li>
</ol>
</div>
<section>
<ul>
<li>List with <a href="#">link</a></li>
<li>List item without link</li>
</ul>
</section>
<footer>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</footer>

/* css code*/


{
background-color: #758283;
font-family: "Comic Sans MS";
font-style: italic;
font-size: 20px;
}

Here, we have applied some CSS to the HTML code. “*” means we have targeted every HTML element and applied these styles to them. So, below is the output of these codes.

Result:

Now, that we know what CSS is and how it works. Let’s move to the next part of rotating the text in CSS.

How to rotate text in CSS

To implement the CSS text rotate property or style in our web page we basically can use the following methods:

1. Using writing-mode
2. Using text-orientation
3. Using rotate property of CSS
4. Using the function rotate() of the transform property of CSS

These are the four ways in which rotating text in CSS can be done. Now, we will look into the details of these four methods.

Using writing-mode

Let us now explore the first way by which implementation of CSS text rotate can be done i.e, using the writing-mode.

Syntax:

elementClass {
	writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-lr  | sideways-rl;
}

What is the significance of the values of the writing-mode property:

• horizontal-tb: For this value, the texts are placed horizontally from left to right for the left-to-right scripts and the texts are placed horizontally from right to left for right-to-left scripts.
• vertical-rl: For this value, the texts are placed vertically from top to bottom for the left-to-right scripts, and the next vertical line is placed to the left of the previous line. And the texts are placed vertically from bottom to top for right-to-left scripts and the next vertical line is placed to the right of the previous line.
• vertical-lr: For this value, the texts are placed vertically from top to bottom for the left-to-right scripts, and the next vertical line is placed to the right of the previous line. And the texts are placed vertically from bottom to top for right-to-left scripts and the next vertical line is placed to the left of the previous line.
• sideways-rl: For this value, the texts are placed vertically from bottom to top for the left-to-right scripts and the texts are placed vertically from top to bottom for right-to-left scripts. All the texts and characters are set sideways towards the right.
• sideways-lr: For this value, the texts are placed vertically from top to bottom for the left-to-right scripts and the texts are placed vertically from bottom to top for right-to-left scripts. All the texts and characters are set sideways towards the left.

Let us look at an example:

<!-- html code -->
<section>
<div>
<h3>Heading</h3>
<p>
This is a Paragraph. In this paragraph, we will try to rotate the heading of this paragraph by using the first method i.e, by using the writing-mode property of CSS.
</p>
</div>
</section>

/* css code */

section {
width: 300px; margin: 80px auto;
}
div {
display: block;
position: relative;
margin: 40px 0;
}
div p{
padding: 15px;
margin-left: 50px;
}
div h3 {
position: absolute;
font: bold 12px Sans-Serif;
letter-spacing: 2px;
text-transform: uppercase;
background: #f1786c;
color: #ffffff;
padding: 35px 10px;
line-height: 24px;
writing-mode: vertical-rl;
}

Output of the code:

Here, we have used the property writing-mode on the tag h3 containing the word “heading” and because of the value vertical-rl, the text is rotated as shown in the above output.

Using text-orientation

Let us now explore the second way by which implementation of CSS text rotate can be done i.e, by using the text-orientation property. This property only works when the writing-mode is set to vertical-lr or vertical-rl. It does not work for horizontal mode.

Syntax:

.elementClass {
	writing-mode: vertical-rl;
	text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
}

What is the significance of the values of text-orientation property:

• mixed: For this value, the horizontal texts are rotated 90 degrees clockwise. This is the default value of the text-orientation property.
• upright: For this value, the characters of horizontal texts are placed in an upright manner.
• sideways: For this value also, the horizontal texts are rotated 90 degrees clockwise and the placement of characters remains the same as they are placed in the horizontally laid text.
• sideways-right: This value is an alias for sideways. It is kept for compatibility purposes.
• use-glyph-orientation: This keyword leads to the use of the deprecated SVG properties such as, glyph-orientation-vertical and glyph-orientation-horizontal.

Let us look at an example:

<!-- html code -->
<section>
  <div>
    <h3>Heading</h3>
    <p>
      This is a Paragraph. In this paragraph we will try to rotate the heading of this paragraph by using the second method i.e, by using the <b>text-orientation</b> property of CSS.
    </p>
  </div>
</section>

/* css code */
section {
width: 300px;
margin: 80px auto;
}
div {
display: block;
position: relative;
margin: 40px 0;
}
div p{
padding: 15px;
margin-left: 50px;
padding-top: 35px
}
div h3 {
position: absolute;
font: bold 12px Sans-Serif;
letter-spacing: 2px;
text-transform: uppercase;
background: #f1786c;
color: #ffffff;
padding: 35px 10px;
line-height: 24px;
writing-mode: vertical-rl;
text-orientation: upright;
}

Output of the code:

Here, we have used the property writing mode on the tag h3 containing the word “heading” and due to the value upright of the text-orientation property, the text is rotated as shown in the above output.

Using rotate property of CSS

Let us now explore the third way by which implementation of CSS text rotation can be done i.e, by using the rotate property of CSS.

This property turns the text or element around one or more axes in a clockwise and counterclockwise direction. The angle values of the rotate property are provided in degree, gradian, radian, or turn value.

Syntax:

.elementClass {
	rotate: none | <angle> | [ x | y | z | number{3} ] && <angle> ;
}

What is the significance of the values of rotate property:

• none: This is the default value. For this, no rotation is applied.
• angle: This is the numeric value expressed in deg, rad, grad, or turns. This value specifies how much the text will be rotated around the z-axis.
• axis name plus angle value: For this value, the text will be rotated around a specified axis and how much the text will be rotated is determined by the angle value provided.
• vector plus angle value: For this value, the three numbers represent an origin-centered vector that defines a line around which the text will be rotated and the angle specifies how much it will be rotated.

Let us look at an example:

<!-- html code -->
<section>
  <div>
    <h3>Heading</h3>
    <p>
      This is a Paragraph. In this paragraph we will try to rotate the heading of this paragraph by using the third method i.e, by using the <b>rotate</b> property of CSS.
    </p>
  </div>
</section>

/* css code */
section {
width: 300px;
margin: 80px auto;
}
div {
display: block;
position: relative;
margin: 40px 0;
}
div p{
padding: 15px;
margin-left: 45px;
padding-top: 45px;
}
div h3 {
position: absolute;
font: bold 12px Sans-Serif;
letter-spacing: 2px;
text-transform: uppercase;
background: #f1786c;
color: #ffffff;
padding: 10px;
line-height: 24px;
rotate: -45deg;
}

Output for the code:

Here, we have used the property rotate on the tag h3 containing the word “heading” and due to the value -45deg of rotate property, the text is rotated counterclockwise as shown in the above output.

Using the function rotate() of the transform property of CSS

Let us now explore the fourth way by which implementation of CSS text rotate can be done i.e, by using the rotate() function of the transform property. With the help of this property, we can rotate, skew or translate an element or text according to our requirements. Out of all the mentioned properties, this transforms property and rotate() function is used mostly when applying the style of rotating text in CSS.

The texts or elements rotate around the transform-origin. The transform-origin is a fixed point around which the text or elements rotate. The default value is the center, but we can also use our custom values.

Syntax:

.elementClass {
	transform: none | <transform-function>
}

What is the significance of the values of rotate():

• none: For this value, no transform is applied and the text or the element will not be rotated.
• transform-function: Multiple transform-function can be applied. For rotating the text we usually apply the rotate() function.

Let us look at an example:

<!-- html code -->
<section>
  <div>
    <h3>Heading</h3>
    <p>
      This is a Paragraph. In this paragraph we will try to rotate the heading and content of the paragraph by using the fourth method i.e, by using the <b>rotate()</b> function of transform property of CSS.
    </p>
  </div>
</section>

/* css code */
section {
width: 300px;
margin: 80px auto;
}
div {
display: block;
position: relative;
margin: 40px 0;
}
div p{
padding: 15px 31px;
transform: rotate(-45deg);
}
div h3 {
position: absolute;
font: bold 12px Sans-Serif;
letter-spacing: 2px;
text-transform: uppercase;
background: #f1786c;
color: #ffffff;
padding: 10px 30px;
line-height: 24px;
transform: rotate(-45deg);
}

Output of the code:

Here, we have used the function rotate() of the transform property on the tag h3 containing the word “heading” and on the p tag containing the content of the paragraph, and due to the value -45deg of rotate(), the text of heading and paragraph is rotated counterclockwise as shown in the above output.

Apart from rotating the text, we can also use CSS animation to animate the rotation of the text. We can achieve this feature by using CSS keyframes. With the help of keyframes, we can specify the start and the end states, and we can also specify the intermediate state if required.

Let us look at an example of keyframes:

<!-- html code -->
<section>
<div>
<h3>Heading</h3>
<p>
This is a dummy Paragraph. In this paragraph, we will use the animation <b>keyframes</b> on the heading. keyframes are used to provide animations to the rotating text.
</p>
</div>
</section>

/* css code */

section {
width: 300px;
margin: 80px auto;
}
div {
display: block;
position: relative;
margin: 40px 0;
}
div p{
padding: 70px 31px 15px 31px;
}
div h3 {
position: absolute;
font: bold 12px Sans-Serif;
letter-spacing: 2px;
text-transform: uppercase;
background: #f1786c;
color: #ffffff;
padding: 10px 105px;
line-height: 24px;
}
@keyframes rotate {
from {
transform-origin: top left;
transform: rotate(0deg);
}
to {
transform-origin: top left;
transform: rotate(90deg);
padding: 10px 30px;
}
}
@keyframes rotateP {
from {
transform: rotate(0deg);
}
to {
transform: rotate(0deg);
padding-top: 30px;
margin-left: -20px;
}
}
h3 {
animation: rotate 3s alternate infinite;
}
p {
animation: rotateP 3s alternate infinite;
}

Output of the code:

In this example, as described in the codes we have used keyframes and applied animations on the heading and paragraph.

Conclusion

In this article we came to know about the CSS text rotate feature. Rotating text in CSS gives our website an appealing design and a dynamic look. Whether to rotate a heading, a paragraph, or any other text on the webpage, this job can be easily done with the help of the “writing-mode”, “text-orientation”, “rotate” property, and “rotate()” of the transform property. On top of that, using animations makes the website more appealing to the end users.