纯CSS写立方体动画

CSS3动画animation+@keyframes的使用

代码：

• CSS

body,
       html,
       div,
       ul,
       li {
           margin: 0;
           padding: 0;
       }
       section {
           position: relative;
           perspective: 1600px;
           border: 1px solid #000;
           margin: 0 auto;
           width: 300px;
           height: 300px;
       }
       .box {
           height: 300px;
           margin: 0 auto;
           position: relative;
           transform-style: preserve-3d;
           width: 300px;
           transition: 10s;
           animation: move 20s infinite  linear;  /*动画的名称、执行完成用时、循环播放、线性过度 */
       }
       @keyframes move{
           0%{transform:rotateY(0deg)}
           20%{transform:rotate3d(1,0,0,300deg)}
           40%{transform:rotate3d(0,1,1,600deg)}
           60%{transform:rotate3d(1,0,1,900deg)}
           80%{transform:rotate3d(0,0,1,180deg)}
           100%{transform:rotate3d(1,1,0,270deg)}
       }
       .box>li {
           width: 300px;
           height: 300px;
           list-style: none;
           text-align: center;
           line-height: 300px;
           font-size: 30px;
           position: absolute;
       }

       .box>li>img {
           width: 300px;
           height: 300px;
       }

       .one {
           background: rgba(255, 0, 5, 0.3);
           transform: translateZ(150px);
       }

       .two {
           background: rgba(220, 104, 44, 0.3);
           transform: rotateY(90deg) translateZ(150px);
       }

       .three {
           background: rgba(255, 239, 0, 0.3);
           transform: translateZ(-150px) rotate(180deg);
       }

       .four {
           background: rgba(86, 255, 0, 0.3);
           transform: rotateY(-90deg) translateZ(150px);
       }

       .five {
           background: rgba(0, 76, 255, 0.3);
           transform: rotateX(90deg) translateZ(150px);
       }

       .six {
           background: rgba(168, 0, 255, 0.3);
           transform: rotateX(-90deg) translateZ(150px);
       }

• HTML

<section>
       <ul class="box">
           <li class="one"><img src="./img/img1.jpg" alt=""></li>
           <li class="two"><img src="./img/img2.jpg" alt=""></li>
           <li class="three"><img src="./img/img3.jpg" alt=""></li>
           <li class="four"><img src="./img/img4.jpg" alt=""></li>
           <li class="five"><img src="./img/img5.jpg" alt=""></li>
           <li class="six"><img src="./img/img6.jpg" alt=""></li>
       </ul>
   </section>

• 效果
  
  可以自行设置动画的时间、运行轨迹等，主要实现的属性 ：animation+@keyframes