Introduction to CSS Rotate Text
Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This function not only rotates text but also rotates HTML elements. These functions are different types.
rotate():- rotate3d(x,y,z,angleValue)
- rotateX(angleValue)
- rotateY(angleValue)
- rotateZ(angleValue)
Real-Time Example: Some situations text must be presented in the exact vertical direction and some situation text must be presented with some angle. This we can do by using a rotate function.
How does Rotate Text work in CSS?
Rotate text can be worked on by using the rotate() function. Each function has the sub-functions they are given below
1. rotate3d(x,y,z,angleValue)
It will rotate the text in x, y, and z directions with some angle.
Syntax:
text
{
transform: rotate3d(x,y,z,angleValue);
}2. rotateX(angleValue)
It will rotate the text in the x-direction with some angle.
Syntax:
text
{
transform: rotateX(angleValue);
}3. rotateY(angleValue)
It will rotate the text in the y-direction with some angle.
Syntax:
text
{
transform: rotateY(angleValue);
}4. rotateZ(angleValue)
It will rotate the text in the z-direction with some angle.
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
Syntax:
text
{
transform: rotateZ(angleValue);
}Examples
Below are the examples mentioned:
1. Rotate() function
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.rotate1 {
width: 180px;
height: 400px;
margin: 0 0 0 200px;
font-size: 18px;
color: brown;
background-color: lightgray;
transform: rotate(90deg);
}
.rotate2
{
width: 180px;
height: 400px;
font-size: 18px;
margin: 0 0 0 200px;
color: brown;
background-color: lightgray;
transform: rotate(-90deg);
}
h2
{
color: blue;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction of rotate function demo</h1>
<h2>Rotate text clock wise direction:</h2>
<div class="rotate1">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
<h2>Rotate text anti clock wise direction:</h2>
<div class="rotate2">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
</body>
</html>Output:
2. RotateZ() function
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.rotate1 {
width: 180px;
height: 400px;
margin: 0 0 0 200px;
font-size: 18px;
color: red;
background-color: lightblue;
transform: rotateZ(45deg);
}
.rotate2
{
width: 180px;
height: 400px;
font-size: 18px;
margin: 0 0 0 200px;
color: red;
background-color: lightblue;
transform: rotateZ(-45deg);
}
h2
{
color: orange;
}
h1
{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction of rotate function demo</h1>
<h2>Rotate text clock wise direction:</h2>
<div class="rotate1">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
<h2>Rotate text anti clock wise direction:</h2>
<div class="rotate2">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
</body>
</html>Output:
3. RotateZ() function
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.rotate1 {
width: 180px;
height: 400px;
margin: 0 0 0 200px;
font-size: 18px;
color: navy;
background-color: lightgreen;
transform: rotateZ(180deg);
}
.rotate2
{
width: 180px;
height: 400px;
font-size: 18px;
margin: 0 0 0 200px;
color: navy;
background-color: lightgreen;
transform: rotateZ(-180deg);
}
h2
{
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction of rotate function demo</h1>
<h2>Rotate text clock wise direction:</h2>
<div class="rotate1">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
<h2>Rotate text anti clock wise direction:</h2>
<div class="rotate2">Rotate text can be done by using rotate() function in CSS. This are used to rotate the text in either clock wise or anti clock wise direction. This functions not only rotate text but also rotates HTML elements. This function are different types.
rotate():
rotate3d(x,y,z,angleValue)
rotateX(angleValue)
rotateY(angleValue)
rotateZ(angleValue)
</div>
<br>
</body>
</html>Output:
Conclusion
Rotate text can be done by using the rotate() function. We can rotate the text in a clockwise and anti-clockwise directions. The rotate function can also rotate HTML elements as well.
Recommended Articles
This is a guide to CSS Rotate Text. Here we discuss an introduction to CSS Rotate Test, how to rotate text works with programming examples for better understanding. You can also go through our other related articles to learn more –
