图片旋转之二-transition动画

只支持-webkit-内核的浏览器的CSS代码......

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;/*********这个是关键代码*********************/
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg);
}

其中-webkit-transition:all 0.5s ease-in;参数的解释：

transiton属性有这几个值：
 transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是只指定backgound参与这个过渡
 transition-duration:*//指定这个过渡的持续时间
 transition-delay:* //延迟过渡时间
 transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

 linear //线性过度
 ease-in //由慢到快
 ease-out //由快到慢
 ease-in-out //由慢到快在到慢

 

效果观看“鑫空间”的http://www.zhangxinxu.com/study/200912/CSS3-transform-example3.html

其中图片读取用了JS：

<style type="text/css">
.box{width:960px; height:450px; margin:60px auto 0; font-size:0.75em; position:relative;}
.pic{display:block; padding:10px 10px 15px; text-align:center; background:white; border:1px solid #bfbfbf; -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; position:absolute; z-index:1;}
.pic img{display:block; margin-bottom:10px; border:0;}
.pic:hover,.pic:focus,.pic:active{border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); z-index:2;}
.pic1{bottom: 10px; right: 365px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg);}
.pic2{top: 50px; right: 20px; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); transform: rotate(-4deg);}
......
</style>

<div class="box">
<script type="text/javascript">
            var box = document.getElementById("box");
            var pics = "";
            for(var i=1; i<=15; i+=1){
                var random_width = 100+ 106*Math.random();
                pics += '<a href="#" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="http://image.zhangxinxu.com/image/study/s/s256/mm'+i+'.jpg" />美女'+i+'</a>';	
            }
            box.innerHTML = pics;
</script>
</div>