CSS3学习——鼠标经过旋转

<style>
div{
position: absolute;
left: 100px;
top: 100px;
width: 144px;
height: 144px;
/*background: url(1.jpg) no-repeat;*/
background: red;
background-size: cover;    /* 用背景图像覆盖div元素盒子 */
-webkit-background-size: cover ;
-o-background-size: cover ;
background-size: cover ;
/* 定义动画的过程 */
-webkit-transition:-webkit-transform .5s ease-in;
-moz-transition:-moz-transform .5s ease-in;
-o-transition:-o-transform .5s ease-in;
transition:transform .5s ease-in;
}
div:hover{
/* 定义动画的状态 */
-webkit-transform: rotate(360deg) scale(1);
-moz-transform: rotate(360deg) scale(1);
-o-transform: rotate(360deg) scale(1);
-transform: rotate(360deg) scale(1);
}
</style>