鼠标经过变大1.2倍、旋转360度并改变背景色。
HTML代码部分
<div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div>
CSS代码部分
.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }
.demo_rotate{
transition:1s ease all;
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
padding:10px;
margin:90px auto;
}
.demo_rotate:hover{
transform:rotate(360deg) scale(1.2,1.2);
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-moz-transform:rotate(360deg) scale(1.2,1.2);
background:#ff9900;
}
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |