CSS 3D Transform

    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 transform property 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.
    Previous Tutorial Next Tutorial