.div1{transform: rotate(45deg)}
.div1 span{transform: rotate(45deg);display: inline-block}
.div2{transform:scale(0.5,1)}
.div3{transform:skew(30deg,20deg)}
.div4{transform:translate(45px,50px)}
.div5{transform:rotate(45deg) scale(0.5) skew(30deg,30deg) translate(100px,100px)}
.div6:hover{transition:2s; -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH();}
/*.div6{transition:width 2s;}
transform:
rotate属性 旋转 默认顺时针旋转
scale属性 缩放
skew属性 倾斜
translate属性 移动
transition:过渡的时间
一个例子:
.top{width:240px;height:135px;overflow: hidden;border:1px solid #ccc;}
.top img{max-width: 100%;height: auto;-webkit-transition: all ease-out 1s; transition: all 1s;}
.top img:hover{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
<div class="top">
<img src="">
</div>