在css3里rotate()函數是能夠旋轉的元素，他主要是在二維空間內進行旋轉操作，這個rotate()函數使用如下：
如果對元素本身或者元素設置了perspective值，那么rotate3d()函數可以實現一個3維空間內的旋轉。
關聯屬性：transform-origin。
取值
rotate(<angle>);<angle>為一個角度值，單位deg，可以為正數或者負數，正數是順時針旋轉，負數是逆時針旋轉。
rotateX(angele),相當于rotate3d(1,0,0,angle)指定在3維空間內的X軸旋轉
rotateY(angele),相當于rotate3d(0,1,0,angle)指定在3維空間內的Y軸旋轉
rotateZ(angele),相當于rotate3d(0,0,1,angle)指定在3維空間內的Z軸旋轉
語法
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_boxrotate_clockwise">順時針旋轉45度</div>
<divclass="demo_boxrotate_anticlockwise">逆時針旋轉45度</div>
<divclass="demo_boxrotateX">3維空間內X軸旋轉60度</div>
<divclass="demo_boxrotateY">3維空間內Y軸旋轉60度</div>
<divclass="demo_boxrotateZ">3維空間內Z軸旋轉60度</div>