CSS3 2D transform 720度缩放旋转效果实例页面

代码:

CSS代码:
.trans_effect {
    display:block;
    line-height:100px;
    width:100px;
    background:#beceeb;
    margin:30px auto;
    text-align:center;
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}
                
HTML代码:
<a href="/" class="trans_effect">摸我!</a>

                

效果:

分享到:0