css3 transform实例制作

<style type="text/css">

.red{background:#f60;width:100px;height:200px;margin:20px auto;}

.tf_rotate{-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);}

.tf_skew{-webkit-transform: skew(10deg);-moz-transform: skew(10deg);}

.tf_scale{-webkit-transform: scale(1.5);-moz-transform: scale(1.5);}

.tf_translate{-webkit-transform: translate(100px,20px);-moz-transform: translate(100px,20px);}

.tr_all{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}

.tr_all:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

</style>

<div class="tf_rotate red">旋转</div>

<div class="tf_skew red">倾斜</div>

<div class="tf_scale red">缩放</div>

<div class="tf_translate red">位移</div>

<div class="tr_all red">位移</div>