How to use CSS3 function rotate()

We all know that rotate()function in css3 can rotate elements. It mainly performs rotation operations in two-dimensional space. So today we will bring you an example to take a look. How to use this rotate() function.

If a perspective value is set for the element itself or the element, then the rotate3d() function can achieve rotation in a 3-dimensional space.

AssociationAttribute: transform-origin.

Value

rotate(); is an angle value, the unit is deg, it can be a positive number or a negative number, a positive number means clockwise rotation, a negative number is Anticlockwise rotation.

rotateX(angele), equivalent to rotate3d(1,0,0,angle) specifies the X-axis rotation in the 3-dimensional space

rotateY(angele), equivalent to rotate3d(0, 1,0,angle) specifies the Y-axis rotation in the 3-dimensional space

rotateZ(angele), which is equivalent to rotate3d(0,0,1,angle) specifies the Z-axis rotation in the 3-dimensional space

Grammar

t

ransform:rotate(<angle>);
CSS
.rotate_clockwise{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:absolute;
left:10px;
top:80px;
}
.rotate_anticlockwise{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
position:absolute;
left:200px;
top:80px;
}
.rotateX{
-webkit-transform:perspective(800px) rotateX(60deg);
-moz-transform:perspective(800px) rotateX(60deg);
position:absolute;
left:400px;
top:80px;
}
.rotateY{
-webkit-transform:perspective(800px) rotateY(60deg);
-moz-transform:perspective(800px) rotateY(60deg);
position:absolute;
left:600px;
top:80px;
}
.rotateZ{
-webkit-transform:perspective(800px) rotateZ(60deg);
-moz-transform:perspective(800px) rotateZ(60deg);
position:absolute;
left:800px;
top:80px;
}
HTML
<divclass="demo_box rotate_clockwise">顺时针旋转45度</div>
<divclass="demo_box rotate_anticlockwise">逆时针旋转45度</div>
<divclass="demo_box rotateX">3维空间内X轴旋转60度</div>
<divclass="demo_box rotateY">3维空间内Y轴旋转60度</div>
<divclass="demo_box rotateZ">3维空间内Z轴旋转60度</div>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Related reading:

Detailed introduction to the border-image attribute in Css3

CSS3 makes circular style breadcrumbs Code implementation steps

Css3 font implementation steps to create flame effect

The above is the detailed content of How to use CSS3 function rotate(). For more information, please follow other related articles on the PHP Chinese website!