一天一代码之CSS3 3D动画旋转木马_perspective:1500px-优快云博客

本文链接：https://blog.youkuaiyun.com/Now_Sprouting/article/details/105231262

本文详细介绍了一种使用CSS3实现的3D旋转盒子效果，包括关键的CSS属性如perspective、transform-style、transition和animation的运用，以及通过hover状态暂停动画的方法。代码示例展示了如何设置盒子的尺寸、位置和背景，并对每个子元素应用不同的3D变换，创建出炫酷的立体翻转效果。

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

效果图如下:
在这里插入图片描述
CSS代码如下:

 body {
            perspective: 1500px;
        }
        
        .box {
            position: relative;
            width: 300px;
            height: 285px;
            margin: 200px auto;
            transform-style: preserve-3d;
            transition: all 1s;
            animation: rotation 10s linear infinite backwards;
        }
        
        .box:hover {
            animation-play-state: paused;
        }
        
        @keyframes rotation {
            0% {}
            100% {
                transform: rotateY(360deg);
            }
        }
        
        .box div {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -142px;
            margin-left: -150px;
            width: 300px;
            height: 284px;
            background: url(311.jpg) no-repeat;
        }
        
        .box div:first-child {
            transform: translateZ(400px);
        }
        
        .box div:nth-child(2) {
            transform: rotateY(60deg) translateZ(-400px) rotateY(180deg);
        }
        /* 这里比较特殊,先给旋转让角度改变然后再进行位移 */
        
        .box div:nth-child(3) {
            transform: rotateY(60deg) translateZ(400px);
        }
        
        .box div:nth-child(4) {
            transform: rotateY(120deg) translateZ(400px);
        }
        
        .box div:nth-child(5) {
            transform: rotateY(120deg) translateZ(-400px) rotateY(180deg);
        }
        
        .box div:last-child {
            transform: translateZ(-400px) rotateY(180deg);
        }

HTML代码如下:

 <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

如有疑问欢迎评论区评论

一天一代码之CSS3 3D动画 旋转木马

一天一代码之CSS3 3D动画旋转木马