Open In App

CSS 3D Transforms

Improve
Improve
Like Article
Like
Save
Share
Report

It allows changing 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 element around X-axis at a given degree. 

Example: This example shows the use of the rotateX() method.

html




<!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: This example shows the use of the rotateY() method.

html




<!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: This example shows the use of the rotateZ() method.

html




<!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>


Output:

 rotate z



Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads