360度 图片 旋转 

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>CSS3鼠标悬停360度旋转效果
        </title>
        <style>
        * {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    background:#1F1F1F;
}
.zzsc {
    width:220px;
    height:220px;
    margin:0 auto;
    background:url(569d12756f794.jpg) no-repeat left top;
    -webkit-background-size:220px 220px;
    -moz-background-size:220px 220px;
    background-size:220px 220px;
    -webkit-border-radius:110px;
    border-radius:110px;
    -webkit-transition:-webkit-transform 2s ease-out;
    -moz-transition:-moz-transform 2s ease-out;
    -o-transition:-o-transform 2s ease-out;
    -ms-transition:-ms-transform 2s ease-out;
}
.zzsc:hover {
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}

        </style>
    </head>
    <body>
        <div class="zzsc">
        </div>
        <div style="text-align:center;clear:both;">
        </div>
    </body>
</html>

 

posted @ 2016-11-14 18:49  Jinsuo  阅读(323)  评论(0)    收藏  举报