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>