Open In App

CSS 3D Transforms

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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