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(<angle>)

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

 

　　二、rotate3d语法规则

　　rotate3d(<number>, <number>, <number>, <angle>)

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

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

 

 

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

　　1、rotatez()应用实例

　　html代码：

　　<div class="rotatez">transform:rotatez(50deg);</div>

　　CSS样式：

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

　　效果图：

 

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

 

　　2、rotate3d()应用实例

　　html代码：

　　<div class="rotate3d">transform:rotate3d(1,2,1,60deg);</div>

　　CSS样式：

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

　　效果图：

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