CSS3新增样式大解析：[6]rotate之旋转-初级

1、css3新增的一个控制元素旋转属性的函数是rotate()[不要怀疑，它的确是一个隐形的函数，他的使用很类似与js中的函数]。同之前所讲过的translate和scale，他也分为2D和3D的旋转，差别就是Z轴的旋转。

2、现在我们来看实例，代码如下：<style>.demo { margin:100px auto; width:300px; height:300px; backgrou荏鱿胫协nd:#ededed; border:1px dotted #ff0000; position:relative;}.fl { width:300px; height:145px; background:#00cb99;}.fr { width:300px; height:145px; margin-top:10px; background:#0093b4;}.pa { position:absolute; top:75px; left:75px; width:150px; height:150px; background-color:#f2f2f2;}</style><div class="demo"> <div class="fl"></div> <div class="fr"></div> <div class="pa"></div></div>demo的div里面有三个div，最终实现的效果如下图：

4、我们再给demo加上：transform:rotate(45deg，45deg);会发现没有变化，查看代码知道原来这个属性浏览器没有识别出来，这是为什么呢？这是因为默认的rotate（）只能传入一个旋转角度值，而且默认的角度是以电脑屏幕的基准面，以自己的中心为基准点进行旋转的。说白了他是一个二维的旋转。

6、分析：上图画的坐标轴没画好，见谅哈。横的是X轴，竖的是Y轴，斜线是Z轴(也就是你盯着电脑看视线到电脑这个轴)rotate的转动基准是以轴来转动的，当多个轴交叠旋转才会形成围绕某个点旋转的效果。元素默认情况下，他所在的面是Z轴与Y轴所形成的面（或平行面）。当谈围绕X轴转，若传入的为正值，则元素上面会向屏幕里面转动，下面回向屏幕外面转动，也就是向用户转动。其他的几个面也是同样的道理。现在我们来看沿着单个轴转动的情况，这样会帮助你理解上面这段话。

7、现在我给demo加上transform:rotateX(45deg);有没有发现图象显得没有原来的高了，对比下两边的图象。其实元素的高度并没有变，而是透视导致。现象一张纸看他的侧面和看他的正面，所得到的宽度是不一样的。

8、rotateY()/rotateZ()这里我就不做介绍了。因为它们的使用和rotateX一样，只是转的角度不同罢了。好了rotate的初级使用就介绍到这里了。