In the previous chapter you learnt about CSS3 2D Transform. Now in this chapter we will learn about CSS3 3D Transform, which is used for 3 dimensional animation or rotation.
CSS3 3D Transform
A transform is such a property of CSS3, which is used for changing the actual form of the element. With this feature of CSS3 You can change the shape, size and position of an element.
A 3D Transform is such an amazing feature of CSS3 Transform, which is used for the following methods.
✔ rotateX()
✔ rotateY()
rotateX() method
The rotateX() Method is used to rotate an object towards X-axis at given degree.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_norotate
{
float:left;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotatex
{
position:absolute;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:rotateX(140deg);
-webkit-transform:rotateX(140deg);
-moz-transform:rotateX(140deg);
}
</style>
</head>
<body>
<div id="div_norotate"> original</div>
<div id="div_rotatex">After rotateX method</div>
</body>
</html>
rotateY() method
The rotateY() Method is used to rotate an object towards Y-axis at given degree.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_norotate
{
float:left;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotateY
{
position:absolute;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:rotateY(140deg);
-webkit-transform:rotateY(140deg);
-moz-transform:rotateY(140deg);
}
</style>
</head>
<body>
<div id="div_norotate"> original</div>
<div id="div_rotateY">After rotateY method</div>
</body>
</html>