1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
<style>/* 经常发现很多相同的属性写了很多遍，只是前叙不同，这是为了兼容更多浏览器的用法，前叙都是这些浏览器专用的私有属性
-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>
1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X)
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left\right
例子: transform-origin: left top 元素将在元素的左上角为原点进行旋转运动
transform: scale(X)
可以通过改变元素的该属性,导致元素进行X倍的缩放X为负数时将会产生镜面效果
例子: transform: scale(1.2) 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg)
可以在发生transform的元素中设置transition属性
例子: transition: 1s 代表触发元素发生变化后,变化将于1s内完成
