双方旋转

最新推荐文章于 2024-06-17 09:00:23 发布

前端菜菜鸟

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量119

点赞数

文章标签： css

本文链接：https://blog.csdn.net/zh994990183/article/details/99684461

版权

 <style>
        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            /* background: radial-gradient(circle, #333, #000 50%); */
            position: relative;
            transform-style: preserve-3d;
            /* perspective: 1000px; */

        }

        .box {
            width: 500px;
            height: 500px;
            ;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* border: 1px solid red; */
            animation-name: rotate2;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        main {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform-style: preserve-3d;
            animation-name: rotate;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        .quire2 {
            margin-top: 400px;
        }

        @keyframes rotate {

            0% {
                transform: rotateY(0)
            }

            100% {
                transform: rotateY(360deg)
            }
        }

        @keyframes rotate2 {
            0% {
                transform: rotateZ(0)
            }

            100% {
                transform: rotateZ(360deg)
            }
        }


        .surface {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            box-shadow: 0 0 10px #fff;
            font-size: 40PX;
            color: white;
            /* text-align: center; */

        }


        .top {
            background-color: red;

            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
            background: orange;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .left {
            background-color: yellow;
            transform: rotatey(90deg) translateZ(-50px);
        }

        .right {
            background-color: green;
            transform: rotatey(-90deg) translateZ(-50px);
        }

        .front {
            background-color: blue;
            transform: translateZ(50px);
        }

        .back {
            background-color: purple;
            transform: translateZ(-50px) rotateX(180deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <main>
            <div class="surface top">1</div>
            <div class="surface bottom">2</div>
            <div class="surface left">3</div>
            <div class="surface right">4</div>
            <div class="surface front">5</div>
            <div class="surface back">6</div>
        </main>
        <main class="quire2">
            <div class="surface top">1</div>
            <div class="surface bottom">2</div>
            <div class="surface left">3</div>
            <div class="surface right">4</div>
            <div class="surface front">5</div>
            <div class="surface back">6</div>
        </main>
    </div>
</body>