CSS Text Rotation allows web developers to change the orientation of text on a web page. This can be useful for creating visually interesting designs or for presenting information in a more dynamic way. In this guide, we’ll take a look at how to use CSS Text Rotation to rotate text in different directions.
Rotating Text with transform: rotate()
The transform: rotate() CSS property can be used to rotate text. The syntax for this property is as follows:
css
.rotate {
transform: rotate(30deg);
}
In this example, the .rotate class is applied to the text element that needs to be rotated. The transform: rotate(30deg) property rotates the text by 30 degrees clockwise.
Rotating Text with Writing-Mode
Another way to rotate text is to use the writing-mode CSS property. This property can be used to set the direction of the text flow. By setting the direction to vertical, the text can be rotated by 90 degrees.
css
.vertical-text {
writing-mode: vertical-rl;
}
In this example, the .vertical-text class is applied to the text element that needs to be rotated. The writing-mode: vertical-rl; property sets the text direction to vertical.
Rotating Text with Text-Orientation
The text-orientation CSS property can be used to set the orientation of the text characters. This property can be used to rotate text by 180 degrees.
css
.vertical-flip {
text-orientation: sideways;
transform: scaleY(-1);
}
In this example, the .vertical-flip class is applied to the text element that needs to be rotated. The text-orientation: sideways; property sets the orientation of the text characters. The transform: scaleY(-1); property flips the text vertically.
Rotating Text with Writing-Mode and Text-Orientation
The writing-mode and text-orientation properties can be used together to rotate text in a more complex way. This can be useful for creating more dynamic designs.
css
.complex-text {
writing-mode: vertical-lr;
text-orientation: mixed;
}
In this example, the .complex-text class is applied to the text element that needs to be rotated. The writing-mode: vertical-lr; property sets the direction of the text flow to vertical. The text-orientation: mixed; property sets the orientation of the text characters to mixed, which allows for more complex rotation.
In conclusion, CSS Text Rotation is a powerful tool for creating dynamic and visually interesting designs on a web page. By using the transform: rotate(), writing-mode, and text-orientation properties, developers can create a wide range of text rotation effects.