360度图片旋转

Posted 2020-08-19 jinsuo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于360度图片旋转的主要内容，如果未能解决你的问题，请参考以下文章

图片360度旋转

[JavaScript案例]360度全景照片

js鼠标拖动图片360度平面旋转

Swift--使图片360° 周期旋转

Swift UI 动画 360 度旋转

使用 CSS3 动画将元素旋转到 360 度

360度 图片 旋转

360度图片旋转