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:
Last Updated :
04 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...