CSS | 3D Transforms - GeeksforGeeks

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:
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:
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>                    
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jeefailure
CSS-Advanced
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?