<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IT书包</title> </head> <body> <div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div> </body> </html>
.demo_box {
border: 1px solid #3DA5DC;
background: #a4dcf9;
height: 100px;
width: 200px;
text-align: center;
color: #fff;
}
.demo_rotate{
-webkit-transition:1s ease all;
-moz-transition:1s ease all;
padding:10px;
margin:90px auto;
}
.demo_rotate:hover{
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-moz-transform:rotate(360deg) scale(1.2,1.2);
background:#ff9900;
}