/* 经常发现很多相同的属性写了很多遍，只是前叙不同，这是为了兼容更多浏览器的用法，前叙都是这些浏览器专用的私有属性
-webkit- webkit类浏览器专用，苹果浏览器，谷歌浏览器
-moz- moz类浏览器专用，火狐浏览器
-ms- IE类浏览器专用，IE浏览器
-o- webkit类浏览器专用，opera浏览器 */
.menuHolder ul ul {
/* transform-origin:x y 设置旋转元素的基点位置(通俗就是从x y z坐标为起点，一般会跟住旋转rotate一并使用) 这个是2D旋转x y，3D旋转则是x y z */
-webkit-transform-origin: 0 0
-moz-transform-origin: 0 0
-ms-transform-origin: 0 0
-o-transform-origin: 0 0
transform-origin: 0 0
/* transform:rotate() 设置旋转元素旋转的角度单位是deg，看成度即可比如旋转45度就是transform:rotate(45deg) */
-webkit-transform: rotate(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
/* transition: property duration timing-function delay
transition设置元素动画效果
property默认是all，对所有元素起作用；
duration规定完成过渡效果需要多少秒或毫秒，默认0，也就是默认不过渡；
timing-function规定速度效果的速度曲线，如ease-in-out先快后慢
delay动画延迟多长时间才开始，单位秒或毫秒 */
-webkit-transition: 1s
-moz-transition: 1s
-ms-transition: 1s
-o-transition: 1s
transition: 1s
}
.menuHolder li.s2:nth-of-type(3) > a {
/* background，设置元素背景，#bbb为颜色值，此处设置是背景色为#bbb（浅灰色） */
background: #bbb
-webkit-transform: rotate(30deg)
-moz-transform: rotateZ(30deg)
-ms-transform: rotate(30deg)
-o-transform: rotate(30deg)
transform: rotate(30deg)
}
.menuHolder .a6 li:nth-of-type(6) > a {
background: #444
-webkit-transform: rotate(75deg)
-moz-transform: rotateZ(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
}
.menuHolder li.s1:hover ul.p2 {
-webkit-transform: rotate(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
}
.menuWindow {
/* 在此元素内的所有元素无论多大也不会溢出，超过的部分会被隐藏 */
overflow: hidden
/* 此元素受绝对定位影响，通过x y坐标来定位，如left ，top ，right ，bottom（只能同时使用left/right top或left/right bottom） */
position: absolute
left: 0
top: 0
/* 元素层块的先后，数字越大的显示越前，如有一个z-index：99的层块，一个z-index：100的层块，100层会覆盖99层 */
z-index: 100
-webkit-transition: 0s 1s
-moz-transition: 0s 1s
-ms-transition: 0s 1s
-o-transition: 0s 1s
transition: 0s 1s
}
.menuHolder:hover .menuWindow {
-webkit-transition: 0s 0s
-moz-transition: 0s 0s
-ms-transition: 0s 0s
-o-transition: 0s 0s
transition: 0s 0s
}
.menuHolder span {
-webkit-transform: rotate(5deg)
-moz-transform: rotateZ(5deg)
-ms-transform: rotate(5deg)
-o-transform: rotate(5deg)
transform: rotate(5deg)
}
</style>
css3新增的一个控制元素旋转属性的函数是rotate()[不要怀疑，它的确是一个隐形的函数，他的使用很类似与js中的函数]。同之前所讲过的translate和scale，他也分为2D和3D的旋转，差别就是Z轴的旋转。
现在我们来看实例，代码如下：
<style>
.demo { margin:100px autowidth:300pxheight:300pxbackground:#edededborder:1px dotted #ff0000position:relative}
.fl { width:300pxheight:145pxbackground:#00cb99}
.fr { width:300pxheight:145pxmargin-top:10pxbackground:#0093b4}
.pa { position:absolutetop:75pxleft:75pxwidth:150pxheight:150pxbackground-color:#f2f2f2}
</style>
<div class="demo">
<div class="fl"></div>
<div class="fr"></div>
<div class="pa"></div>
</div>
demo的div里面有三个div，最终实现的效果如下图：
现在我们对其应用rotate，假设不知道里面可以传入几个值，那我们可以分别试试传入不同数量的值对比效果，给demo加上：
transform:rotate(45deg)（旋转45度，deg是degree的缩写，意为角度；当然这只是一个单位，还有别的单位，但不常用；你也可以直接采用数字而不用单位，这个数字会被自动转换为角度）
效果如下图：
我们再给demo加上：
transform:rotate(45deg，45deg)
会发现没有变化，查看代码知道原来这个属性浏览器没有识别出来，这是为什么呢？
这是因为默认的rotate（）只能传入一个旋转角度值，而且默认的角度是以电脑屏幕的基准面，以自己的中心为基准点进行旋转的。说白了他是一个二维的旋转。
那，我么应该怎么rotate进行三维的旋转呢？
很简单我之前又讲到过translate的translate3d这一属性；同样rotate也有rotate3d的旋转属性。
既然是3d，那我们就很自然的知道他有rotateX()/rotateY()/rotateZ()，这三个分支的旋转属性。
现在我们给demo加上
transform:rotate3d(45deg，45deg,0deg)
在浏览器当中我们同样会发现不起效果，原因还是不识别。
其实这就是rotate3d和translate3d，不同的地方，translate3d传入的三个值分别会被解析为XYZ的位移距离，二translate则不会这么解析，官方给出的解析方法是rotate3d(X?,Y?,Z?,angle)也就是你需要对你需要旋转的轴进行判断，如果你要沿着该轴转动那就将该轴的值设置为1，否则为0；然后在后面的angle中设置旋转的角度，需要注意的是，angle只有一个角度值。
所以上面正确的写法是：
transform:rotate3d(1，1,0,45deg)
效果如下图：
分析：
上图画的坐标轴没画好，见谅哈。
横的是X轴，竖的是Y轴，斜线是Z轴(也就是你盯着电脑看视线到电脑这个轴)
rotate的转动基准是以轴来转动的，当多个轴交叠旋转才会形成围绕某个点旋转的效果。
元素默认情况下，他所在的面是Z轴与Y轴所形成的面（或平行面）。当谈围绕X轴转，若传入的为正值，则元素上面会向屏幕里面转动，下面回向屏幕外面转动，也就是向用户转动。其他的几个面也是同样的道理。
现在我们来看沿着单个轴转动的情况，这样会帮助你理解上面这段话。
现在我给demo加上
transform:rotateX(45deg)
有没有发现图象显得没有原来的高了，对比下两边的图象。
其实元素的高度并没有变，而是透视导致。
现象一张纸看他的侧面和看他的正面，所得到的宽度是不一样的。
rotateY()/rotateZ()
这里我就不做介绍了。因为它们的使用和rotateX一样，只是转的角度不同罢了。
好了rotate的初级使用就介绍到这里了。
1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
