transform 属性向元素应用 2D 或 3D 转换,允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。
浏览器支持情况:
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
<div class="wrap">transform</div>
.wrap{
100px;
height: 100px;
margin:100px auto 0;
background: pink;
line-height: 100px;
text-align: center;
transition:all 3s; //所有的属性都在3秒之内完成
}
.wrap:hover{
transform:rotate(360deg) scale(2); //旋转360度,在原来的基础上放大两倍 transform多个值同时写的时候,中间用空格隔开
-moz-transform:rotate(360deg) scale(2);
-webkit-transform:rotate(360deg) scale(2);
-o-transform:rotate(360deg) scale(2);
-ms-transform:rotate(360deg) scale(2);
}