css3实现3d效果的立方体动画

最新推荐文章于 2025-10-30 09:01:25 发布

原创

最新推荐文章于 2025-10-30 09:01:25 发布 · 2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #动画 #html #前端

纯css3动画写的立方体动画，还是蛮简单的，完整的效果如下：

首先，在html弄6个面

    <div id="wrapper">
        <ul>
            <li><img src="./img/1.png" alt=""></li>
            <li><img src="./img/2.png" alt=""></li>
            <li><img src="./img/3.png" alt=""></li>
            <li><img src="./img/4.png" alt=""></li>
            <li><img src="./img/5.png" alt=""></li>
            <li><img src="./img/6.png" alt=""></li>
        </ul>
    </div>

效果就是一列排下来：

然后，把6个面推在一起，设置position：absolute,使6个面脱离文档叠在一起

   * {
            margin: 0px;
            padding: 0px;

        }

        ul,
        ol {
            list-style: none;
        }
       #wrapper {
            width: 500px;
            height: 500px;
            margin: 300px auto;
        }
        ul {
            width: 200px;
            height: 200px;
            position: relative;
        
        }
        ul>li {
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.6;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;

        }

效果就是这样叠成一张：</