CSS 3D Transforms
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; } .Beginner { font-size: 25px; font-weight: bold; margin: 20px 0; } </ style > </ head > < body > < center > < div class = "gfg" > w3wiki </ div > < div class = "Beginner" > 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; } .Beginner { font-size: 25px; font-weight: bold; margin: 20px 0; } </ style > </ head > < body > < center > < div class = "gfg" > w3wiki </ div > < div class = "Beginner" > 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; } .Beginner { font-size: 25px; font-weight: bold; margin: 20px 0; } </ style > </ head > < body > < center > < div class = "gfg" > w3wiki </ div > < div class = "Beginner" > rotateZ() Method </ div > < div class = "normal_div" > Div Contents... </ div > < div id = "rotateZ" > 90 degree rotated contents... </ div > </ center > </ body > </ html > |
Output:
Contact Us