旋转魔方css

小芒QVQ

于 2022-06-05 19:17:06 发布

阅读量228

点赞数

本文链接：https://blog.youkuaiyun.com/qq_61662856/article/details/125135443

版权

CSS3 动画 3D变换自动轮播背景图片

关键词由优快云通过智能技术生成

这个HTML代码展示了如何创建一个3D自动轮播效果，使用了CSS3的动画和变换属性。背景图片始终保持在视口中心，通过改变旋转角度和Z轴平移实现了连续的360度旋转展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>自动轮播</title>
</head>
<style>
    * {
        margin: 0;
    }

    @keyframes auto {
        0% {
            transform: rotateY(0) rotateX(0deg);
        }

        16.6% {
            transform: rotateY(90deg) rotateX(360deg);
        }

        33.2% {
            transform: rotateY(180deg) rotateX(720deg);
        }

        49.8% {
            transform: rotateY(270deg) rotateX(1080deg);
        }

        66.4% {
            transform: rotateY(180deg) rotateX(1440deg);
        }

        83% {
            transform: rotateY(90deg) rotateX(1800deg);
        }

        100% {
            transform: rotateY(180deg) rotateX(2160deg);
        }
    }

    .main div:nth-of-type(1) {
        background-image: url(../神子cur.png);
        transform: rotateY(0) translateZ(200px);
    }

    .main div:nth-of-type(2) {
        background-image: url(../神子cur.png);
        transform: rotateY(90deg) translateZ(200px);
    }

    .main div:nth-of-type(3) {
        background-image: url(../神子cur.png);
        transform: rotateY(180deg) translateZ(200px);
    }

    .main div:nth-of-type(4) {
        background-image: url(../神子cur.png);
        transform: rotateY(270deg) translateZ(200px);
    }

    .main div:nth-of-type(5) {
        background-image: url(../神子cur.png);
        transform: rotateX(-90deg) translateZ(200px);
    }

    .main div:nth-of-type(6) {
        background-image: url(../神子cur.png);
        transform: rotateX(90deg) translateZ(200px);
    }

    .main {
        margin-top: 300px;
        position: relative;
        transform-style: preserve-3d;
        height: 500px;
        width: 500px;
        animation-name: auto;
        animation-duration: 12s;
        animation-iteration-count: infinite;
        margin: 0 auto;

    }

    .child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-size: 100%;
    }
</style>

<body>
    <div class="main">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>