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>