CSS3 3D rotation property
Here is a brief description of how to rotate an element in 3D in CSS3 using the CSS3 3D rotate() method.
Explanation
Property :
rotate() rotate3d(x,y,z,angle) - Defines a 3D rotation rotateX(angle) - Defines a 3D rotation along the X-axis rotateY(angle) - Defines a 3D rotation along the Y-axis rotateZ(angle) - Defines a 3D rotation along the Z-axisUsage:
transform:rotate(10deg);
transform:rotateX(10deg);
transform:rotateY(10deg);
transform:rotateZ(10deg);
Definition:
The rotate() method rotates an element in 3D view.
It takes the following values.
- rotateX : Defines a 3D rotation along the X-axis.
- rotateY : Defines a 3D rotation along the Y-axis.
- rotateZ : Defines a 3D rotation along the Z-axis.
Example 1:
<style>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div1 {
transform:rotateX(100deg);
}
</style>
<div id="div1" class='demodiv'>rotateX</div>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div1 {
transform:rotateX(100deg);
}
</style>
<div id="div1" class='demodiv'>rotateX</div>
Result:
rotateX
Example 2:
<style>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div2 {
transform:rotateY(100deg);
}
</style>
<br> <div id="div2" class='demodiv'>rotateY</div>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div2 {
transform:rotateY(100deg);
}
</style>
<br> <div id="div2" class='demodiv'>rotateY</div>
Result:
rotateY
Example 3:
<style>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div3 {
transform:rotateZ(100deg);
}
</style>
<div id="div3" class='demodiv'>rotateZ</div>
.demodiv {
position: relative;
height: 100px;
width: 100px;
background-color: indigo;
color:white;
}
#div3 {
transform:rotateZ(100deg);
}
</style>
<div id="div3" class='demodiv'>rotateZ</div>
Result:
rotateZ
