CSS 3D Transforms

By | October 18, 2020

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.

Vamware

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.

Leave a Reply

Your email address will not be published. Required fields are marked *