css3立体循环旋转

最新推荐文章于 2024-06-20 04:45:00 发布

jojo付啾啾

最新推荐文章于 2024-06-20 04:45:00 发布

阅读量1.4k

点赞数

分类专栏： CSS 文章标签： css3立体循环旋转

本文链接：https://blog.csdn.net/DreamFJ/article/details/83412644

版权

CSS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

图片：

方法一：通过转动父元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #B3C04C;
        }
        
        .wallet {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: spin 4s linear infinite;
        }
        
        .wallet::before,
        .wallet::after {
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border-radius: 150px;
        }
        
        .wallet::before {
            background: url(./images/bg.png) left top;
            transform: rotateY(180deg);
        }
        
        .wallet::after {
            transform: translateZ(1px);
            position: absolute;
            left: 0;
            top: 0;
            background: url(./images/bg.png) right top;
        }
        
        @keyframes spin {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="wallet"></div>
</body>

</html>

方法二：通过转动子元素（backface-visibility: hidden;不显示背面，当一个转到背面的时候显示另一个的正面，所以要错开时间旋转，这里提前了2s，如果是推迟2s的话会中间有2s是空白）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #B3C04C;
        }
        
        .wallet {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transform-style: preserve-3d;
        }
        
        .wallet::before {
            transform: rotateY(180deg);
            background: url(./images/bg.png) left top;
        }
        
        .wallet::after {
            background: url(./images/bg.png) right top;
        }
        
        .wallet::before,
        .wallet::after {
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border-radius: 150px;
            position: absolute;
            left: 0;
            top: 0;
            backface-visibility: hidden;
        }
        
        .wallet::before {
            animation: spin 4s linear infinite -2s;
        }
        
        .wallet::after {
            animation: spin 4s linear infinite;
        }
        
        @keyframes spin {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="wallet"></div>
</body>

</html>

效果：

这是个gif。不知道为啥上传上来动不了。。。。

jojo付啾啾

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3立体循环旋转

图片：方法一：通过转动父元素&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3 3D转换&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫

专栏目录