In the 2D transform tutorial, we learned how to use the transform property to make 2 effects, by rotating, scaling, and skewing an element. In this tutorial, we will learn how can we use the transform property for the 3D transformation.
CSS 3D Transformation
In CSS transform property can make 3D transformation with
rotateX(), rotate()
and
rotateZ()
methods. And in this tutorial, you will learn how to use all these three methods with transform property. <
Note
>: Old web-browses do not support transform property so make sure that you have the latest version. The CSS transform property can accept 3 methods for the 3D transformation.
-
rotateX() -
rotateY() -
rotateZ()
CSS transform property rotateX() method
The
rotateX()
method accepts a degree value as a parameter and rotate the element box around the X-axis.
Example
Rotate the element box around X-axis when the user hovers over it.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height:100px;
background-color: red;
border: 2px solid black;
}
div:hover{
transform: rotateX(170deg);
}
</style>
</head>
<body>
<div>Rotate X-Axis</div>
</body>
</html>
CSS transform property rotateY() method
The
rotateY()
method rotates the element box around the Y-axis based on the specified degree.
Example
Rotate the element box around Y-axis when the user hovers over it.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height:100px;
background-color: red;
border: 2px solid black;
}
div:hover{
transform: rotateY(150deg);
}
</style>
</head>
<body>
<div>Rotate Y-Axis</div>
</body>
</html>
CSS transform property rotateZ() method
The
rotateZ()
method accepts the degree value as a parameter and rotates the box element around the Z direction according to the specified degree.
Example
Rotate the element box around Z-axis when the user hovers over it.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height:100px;
background-color: red;
border: 2px solid black;
}
div:hover{
transform: rotateZ(150deg);
}
</style>
</head>
<body>
<div>Rotate Z-Axis</div>
</body>
</html>
CSS transform property rotate3D() method
The
rotate3d()
method is a shorthand method for all the methods mentioned above. Using this method, we can specify the X-axis, Y-axis, and Z-axis along with the degree of rotation for the element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height:100px;
background-color: red;
border: 2px solid black;
}
div:hover{
transform: rotate3d(20,40,50,110deg);
}
</style>
</head>
<body>
<div>Rotate Z-Axis</div>
</body>
</html>
Summary
-
The
transformproperty can also be used to define 3D transformation by rotating an element box around different axes. -
The
rotateX()method rotates the element around X-axis. -
The
rotateY()method rotates the element around Y-axis. -
The
rotateZ()method rotates the element around Z-axis.
People are also reading:
Leave a Comment on this Post