3D transform变换实现的跑马灯效果实例页面

展示

//zxx: 点击任意图片浏览

代码

• HTML：

  <div class="stage">
      <div id="container" class="container">
          <img class="piece" src="1.jpg" style="--index:0;">
          <img class="piece" src="2.jpg" style="--index:1;">
          <img class="piece" src="3.jpg" style="--index:2;">
          <img class="piece" src="4.jpg" style="--index:3;">
          <img class="piece" src="5.jpg" style="--index:4;">
          <img class="piece" src="6.jpg" style="--index:5;">
          <img class="piece" src="7.jpg" style="--index:6;">
          <img class="piece" src="8.jpg" style="--index:7;">
          <img class="piece" src="9.jpg" style="--index:8;">
      </div>
  </div>

• CSS：

  .stage {
      perspective: 800px;
      padding: 50px 0;
  }
  .container {
      width: 128px; height: 90px;
      margin: auto;
      transform: rotateY(0deg);
      transform-style: preserve-3d;
      transition: transform 1s;
  }
  .piece {
      width: inherit; height: inherit;
      position: absolute;
      left: 0; bottom: 0;
      transform: rotateY(calc(var(--index) * 40deg)) translateZ(195.839px);
      /* Chrome bug fix需要 */
      box-shadow: 0 0 transparent;
  }

• JS：

  container.onclick = function () {
      var index = (this.index || 0) + 1;
      this.style.transform = 'rotateY('+ index * 40 +'deg)';
      this.index = index;
  };