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

直接上代码html的代码：<div class="transform transform5">123456</div>css样式代码：.transform { margin: 30px 0 80

直接上代码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);}