css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例

在CSS3中，rotate属性用于设置对象(如 div、ul li、文字等)旋转，可设置对象在 X、Y 和 Z轴的旋转角度；只设置X和Y轴的称为2d旋转，X、Y和Z轴同时设置的称为3d旋转；2d旋转在前面的文章中已经介绍过，本篇继续介绍3d旋转的情况。

有旋转这个属性，使CSS3能制作出变化多样的动画效果，特别是能制作3d效果的动画。以下是rotatez()和rotate3d()的语法规则和具体的应用实例。

一、rotatez语法规则

rotatez()

rotatez用于设置对象在Z轴的旋转角度，表达式中的表示旋转角度，例如 30deg(30度)。

二、rotate3d语法规则

rotate3d(, , , )

三个：分别表示 X、Y 和 Z 轴方向，都不能省略；

：设置对象设置对象的旋转角度，不能省略；

三、rotatez()和rotate3d()应用实例

1、rotatez()应用实例

html代码：

transform:rotatez(50deg);

CSS样式：

.rotatez{transform:rotatez(50deg);width:250px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0;padding:8px;}

效果图：

transform:rotatez(50deg);

从效果图中，可以看出长方形及其其中的文字都旋转了50度。

2、rotate3d()应用实例

html代码：

transform:rotate3d(1,2,1,60deg);

CSS样式：

.rotate3d{transform:rotate3d(1,2,1,60deg);width:290px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果图：

transform:rotate3d(1,2,1,60deg);

从图中可以看出，原本是一个平放的长方形，设置rotate3d效果后，长方形已经斜了，并且还有一点透视效果，上大下小，立体感十分强。