纯 CSS 3d立方体动画

最新推荐文章于 2024-03-21 22:11:31 发布

星河！

最新推荐文章于 2024-03-21 22:11:31 发布

阅读量125

点赞数 1

文章标签： css 3d 前端

本文链接：https://blog.csdn.net/weixin_45398972/article/details/131636983

版权

该文章介绍了如何使用CSS3的transform属性和动画来创建一个3D立方体旋转效果。通过设置不同的transform样式给六个面，再结合关键帧动画，可以实现立方体的动态旋转。当用图片替换盒子背景时，可以制作出具有视觉吸引力的3D立方体动画效果。

摘要由CSDN通过智能技术生成

主要用到 transform 属性的变换和旋转

实现效果：

纯 CSS 3d立方体动画

添加容器，设置 transform-style 属性，保留子元素的3D特性

    <div class="cube"></div>

        .cube {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
        }

添加6个盒子，由于绝对定位全部堆叠在一起

        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
        <div class="box box6"></div>

        .box {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
        }

给盒子设置 transform

        .box1 {		/*正面Z轴移动100px*/
            background: red;
            transform: translateZ(100px);
        }

        .box2 {		/*右面X轴移动100px，Y轴旋转90deg*/
            background: yellow;
            transform: rotateY(90deg) translateX(100px);
            transform-origin: right;
        }

        .box5 {		/*上面Y轴移动-100px，X轴旋转-90deg*/
            background: blue;
            transform: rotateX(-90deg) translateY(-100px);
            transform-origin: top;
        }
		/*其余三个面反向设置*/
        .box3 {
            background: purple;
            transform: rotateY(180deg) translateZ(100px);
        }

        .box4 {
            background: orange;
            transform: rotateY(-90deg) translateX(-100px);
            transform-origin: left;
        }

        .box6 {
            background: green;
            transform: rotateX(90deg) translateY(100px);
            transform-origin: bottom;
        }

容器添加动画，旋转适当角度，这样一个立方体旋转动画就完成了

        .cube {
            animation: rotate 10s linear infinite;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateZ(0deg)
            }
            14.3% {
                transform: rotateY(90deg) rotateZ(90deg)
            }
            28.5% {
                transform: rotateY(180deg) rotateZ(-90deg)
            }
            42.8% {
                transform: rotateY(270deg) rotateZ(90deg)
            }
            57.2% {
                transform: rotateY(90deg) rotateZ(0deg)
            }
            71.5% {
                transform: rotateY(0deg) rotateZ(180deg)
            }
            85.5% {
                transform: rotateY(-90deg) rotateZ(360deg)
            }
            100% {
                transform: rotateY(0deg) rotateZ(0deg)
            }
        }

使用图片，这样一个 iKun 3D立方体动画就做好了

    <div class="cube">
        <div class="box box1"><img src="1.webp" alt=""></div>
        <div class="box box2"><img src="2.webp" alt=""></div>
        <div class="box box3"><img src="3.webp" alt=""></div>
        <div class="box box4"><img src="4.webp" alt=""></div>
        <div class="box box5"><img src="5.webp" alt=""></div>
        <div class="box box6"><img src="6.webp" alt=""></div>
    </div>