CSS-3D动画 webpack-logo 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        padding: 200px;
        background-color: #2b3a42;
    }
    #a {
        position: relative;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        
    }
    #box {
        transform-style: preserve-3d;
        width: 100px;
        height: 100px;
        
        animation: loop 6s linear infinite;
        position: absolute;
    } 
    #x {
        left: 25px;
        top: 25px;
        position: absolute;
        transform-style: preserve-3d;
        width: 50px;
        height: 50px;
        
        animation: loop1 6s linear infinite;
    } 
    @keyframes loop {
        0% {
            transform:rotateX(-35.5deg) rotateY(45deg);
        }

        50%,100% {
            transform:rotateX(-35.5deg) rotateY(-315deg);
        }
    }
    @keyframes loop1 {
        0% {
            transform:rotateX(-35.5deg) rotateY(-45deg);
        }

        50%,100% {
            transform:rotateX(-35.5deg) rotateY(315deg);
        }
    }
    #box1,#box2,#box3,#box4,#box5,#box6,#x1,#x2,#x3,#x4,#x5,#x6{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.1;
        border: 1px solid white;
        background-color: skyblue;
        opacity: 0.4;
        backface-visibility: hiddend;

    }
    #x1,#x2,#x3,#x4,#x5,#x6 {
        
        opacity: 1;
    }
    #box1 {
        transform: rotateY(180deg) translateZ(50px);
    }
    #box2 {
        transform: rotateY(90deg) translateZ(50px);
    }
    #box3 {
        transform: rotateY(-90deg) translateZ(50px);
    }
    #box4 {
        transform: rotateX(-90deg) translateZ(50px);
    }
    #box5 {
        transform: rotateX(90deg) translateZ(50px);
    }
    #box6 {
        transform: translateZ(50px);
    }
    #x1 {
        transform: rotateY(180deg) translateZ(25px);
    }
    #x2 {
        transform: rotateY(90deg) translateZ(25px);
    }
    #x3 {
        transform: rotateY(-90deg) translateZ(25px);
    }
    #x4 {
        transform: rotateX(-90deg) translateZ(25px);
    }
    #x5 {
        transform: rotateX(90deg) translateZ(25px);
    }
    #x6 {
        transform: translateZ(25px);
    }


</style>
<body>
    <div id="a">
        <div id="box">
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
            <div id="box6"></div>
        </div>
        <div id="x">
            <div id="x1"></div>
            <div id="x2"></div>
            <div id="x3"></div>
            <div id="x4"></div>
            <div id="x5"></div>
            <div id="x6"></div>
        </div>
    </div>
</body>
</html>
posted @ 2022-12-14 14:04  coderlq  阅读(25)  评论(0)    收藏  举报