CSS | 3D Transforms

Last Updated : 04 Jun, 2020

It allows to change elements using 3D transformations. In 3D transformation, the elements are rotated along X-axis, Y-axis and Z-axis.

There are three main types of transformation which are listed below:

rotateX()
rotateY()
rotateZ()

The rotateX() Method: This rotation is used to rotate an elements around X-axis at a given degree.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>3D Transformation</title>
        <style>
            .normal_div {
                width: 300px;
                height: 150px;
                color: white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                margin-bottom:20px;
            }
              
            #rotateX {
                width: 300px;
                height: 150px;
                color: white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                -webkit-transform: rotateX(180deg); /* Safari */
                transform: rotateX(180deg); /* Standard syntax */
                  
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#090;
            }
            .geeks {
                font-size:25px;
                font-weight:bold;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <center>
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">rotateX() Method</div>
            <div class = "normal_div"> Div Contents... </div>
            <div id="rotateX">180 degree rotated contents...</div>
        </center>
    </body>
</html>                                

Output:
rotate x

The rotateY() Method: This method is used to rotate an element around Y-axis at given degrees.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>3D Transformation</title>
        <style>
            .normal_div {
                width: 200px;
                color:white;
                font-size:25px;
                height: 100px;
                background-color: green;
                border: 1px solid black;
                margin-bottom:20px;
            }
              
            #rotateY {
                width: 200px;
                color:white;
                font-size:25px;
                height: 100px;
                background-color: green;
                border: 1px solid black;
                -webkit-transform: rotateY(180deg); /* Safari */
                transform: rotateY(100deg); /* Standard syntax */
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#090;
            }
            .geeks {
                font-size:25px;
                font-weight:bold;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <center>
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">rotateY() Method</div>
            <div class = "normal_div"> Div Contents... </div>
            <div id="rotateY">180 degree rotated div contents...</div>
        </center>
    </body>
</html>                                    

Output:
rotate y

The rotateZ() Method: This method is used to rotate an element around Z-axis at a given degree.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>3D Transformation</title>
        <style>
            .normal_div {
                width: 200px;
                height: 100px;
                font-size:25px;
                color:white;
                background-color: green;
                border: 1px solid black;
            }
              
            #rotateZ {
                width: 200px;
                height: 100px;
                color:white;
                font-size:25px;
                background-color: green;
                border: 1px solid black;
                -webkit-transform: rotateZ(90deg); /* Safari */
                transform: rotateZ(90deg); /* Standard syntax */
            }
            .gfg {
                font-size:40px;
                font-weight:bold;
                color:#090;
            }
            .geeks {
                font-size:25px;
                font-weight:bold;
                margin:20px 0;
            }
        </style>
    </head>
    <body>
        <center>
            <div class = "gfg">GeeksforGeeks</div>
            <div class = "geeks">rotateZ() Method</div>
            <div class = "normal_div"> Div Contents... </div>
            <div id="rotateZ">90 degree rotated contents...</div>
        </center>
    </body>
</html>                    