CSS:3D旋轉木馬效果

時間 2020-05-28

標籤 css 3d 旋轉木馬效果欄目 CSS 简体版

原文原文鏈接

一個簡單有趣的css動畫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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。