CSS | 3D Transforms
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:
Please Login to comment...