css3立体循环旋转

图片：

方法一：通过转动父元素

<!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。不知道为啥上传上来动不了。。。。

猜你喜欢