CSS3D旋转木马效果

46次阅读

共计 1663 个字符，预计需要花费 5 分钟才能阅读完成。

一个简单有趣的 css 动画

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>3D 旋转木马效果 </title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }

      #box {
        width: 200px;
        height: 300px;
        animation: rotate 20s linear infinite;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto;
        transform-style: preserve-3d;
      }

      img {
        width: 100%;
        position: absolute;
      }

      img:nth-child(1) {transform: rotateY(0) translateZ(600px);
      }

      img:nth-child(2) {transform: rotateY(36deg) translateZ(600px);
      }

      img:nth-child(3) {transform: rotateY(72deg) translateZ(600px);
      }

      img:nth-child(4) {transform: rotateY(108deg) translateZ(600px);
      }

      img:nth-child(5) {transform: rotateY(144deg) translateZ(600px);
      }

      img:nth-child(6) {transform: rotateY(180deg) translateZ(600px);
      }

      img:nth-child(7) {transform: rotateY(216deg) translateZ(600px);
      }

      img:nth-child(8) {transform: rotateY(252deg) translateZ(600px);
      }

      img:nth-child(9) {transform: rotateY(288deg) translateZ(600px);
      }

      img:nth-child(10) {transform: rotateY(324deg) translateZ(600px);
      }

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

        25% {transform: rotateX(20deg) rotateY(180deg);
        }

        50% {transform: rotateX(0) rotateY(360deg);
        }

        75% {transform: rotateX(-20deg) rotateY(540deg);
        }

        100% {transform: rotateX(0) rotateY(720deg);
        }
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <img src="images/img1.jpg" alt="" />
        <img src="images/img2.jpg" alt="" />
        <img src="images/img3.jpeg" alt="" />
        <img src="images/img4.jpeg" alt="" />
        <img src="images/img5.jpg" alt="" />
        <img src="images/img6.jpeg" alt="" />
        <img src="images/img7.jpeg" alt="" />
        <img src="images/img8.jpeg" alt="" />
        <img src="images/img1.jpg" alt="" />
        <img src="images/img2.jpg" alt="" />
      </ul>
    </div>
  </body>
</html>

正文完