css3新技术-旋转的元素--transform

摘要: 看到别人网站的炫酷旋转动画，想学学，以后应该会用得上。
注：此笔记参考帖子http://www.daqianduan.com/2959.html

直接上代码
html的代码：

<div class="transform transform5">123456</div>

css样式代码：

.transform {
margin: 30px 0 80px 0;
width: 200px;
height: 50px;
font-size: 18px;
font-weight: bold;
background: #DEE4EE;
color: #305999;
text-align: center;
line-height: 50px;
}
.transform5 {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

第一个属性值all表示所有的属性都实现动画改变，这个例子中就是margin,width,height等等属性全部都动画改变。假如只是设置成transition: width 1s ease-in-out;这样子就只有宽度动画改变，其他都是瞬间变化。

第二个属性值
规定动画完成所需时间；

第三个属性值，可选
ease:动画效果效果开始慢，再变快，然后变慢结束；
ease-in:动画效果开始时慢；
ease-out：动画效果结束时慢；
ease-in-out：动画效果开始时和结束时慢；

.transform5:hover{
transform:rotate(90deg) skew(-20deg)scale(1.0) translate(100px,0);
-webkit-transform:rotate(360deg) scale(1.0) translate(0,0);
-moz-transform:rotate(90deg) skew(-20deg)scale(1.0) translate(100px,0);
/*-ms-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0);*/
}

第一个属性值rotate里90相当于旋转90度
第二个属性值skew表示倾斜度
第三个属性值scale表示缩放大小
第四个属性值translate表示移动距离，(x,y)
这四个属性都可以取负值，意为反方向。

示例2，旋转的背景
代码转自：http://www.xwcms.net/js/css3sl/47413.html

.xwcms {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("images/author.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.xwcms:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}