css -- 旋转头像


越过人性的沼泽,谁可以不被弄脏


实现效果

当鼠标悬停是图片顺时针旋转 360 度,离开时逆时针旋转回来


css 样式

.headimage_ {  
    width: 150px;  
    height: 150px;  
    margin: 0 auto;  
    background: no-repeat url("../images/12.jpg") left top;  
    -webkit-background-size: 150px 150px;  
    -moz-background-size: 150px 150px;  
    background-size: 150px 150px;  
    -webkit-border-radius: 110px;  
    border-radius: 110px;  
    -webkit-transition: -webkit-transform 1s ease-out;  
    -moz-transition: -moz-transform 1s ease-out;  
    -o-transition: -o-transform 1s ease-out;  
    -ms-transition: -ms-transform 1s ease-out;
    border:5px solid #96c2f1;  
}  

.headimage_:hover {  
    -webkit-transform: rotateZ(360deg);  
    -moz-transform: rotateZ(360deg);  
    -o-transform: rotateZ(360deg);  
    -ms-transform: rotateZ(360deg);  
    transform: rotateZ(360deg);  
}  

使用:

<div class="headimage">
    <div class="headimage_"></div>      
</div>

图片地址