CSS 3D Transforms
Last Updated :
04 Aug, 2023
Improve
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:
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:
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:
