HTML 3D 走马灯效果

实现一个具有 3D 旋转效果的走马灯效果。

1

2

3

4

5

6

7

8

9

3D 旋转原理

应该有一个中心轴，旋转中心轴角度达到同步旋转每个显示项的效果。所有展示项位于同一个中心点，即通过 position: absolute 将所有 item 集中在一个点。

利用数学公式：tan(360/item总数) = 对角长度(width/2) / 半径长度(r) 达到效果， 半径 r 作用于 translateZ 将所有点拉长。剩下的就是将每个旋转角度作用对应的 Item， 当切换下一个 item 时，中心轴旋转 (360/item总数) 度 或者 每个 item 旋转角度累加(360/item总数) 度。

具体 HTML 布局示例

通过一个 container 容器存放走马灯用于限制显示具体宽高，carsouel 则是用来存放具体的多个显示项。

<div class="container">
  <div class="carsouel">
    <div class="carsouel-item">1</div>
    <div class="carsouel-item">2</div>
    <div class="carsouel-item">3</div>
    <div class="carsouel-item">4</div>
    <div class="carsouel-item">5</div>
    <div class="carsouel-item">6</div>
  </div>
</div>

CSS 示例

.container {
  position: relative; // 相对定位
  width: 800px; // 限制宽度
  height: 400px; // 限制高度
  overflow: hidden; // hidden 可以只显示当前激活的 item
  perspective: 1000px; // 透视距离
}

.carsouel {
  position: absolute; //  绝对定位
  transform-style: preserve-3d;
}

.carsouel-item {
  width: 200px;
  height: 100px;
  position: absolute; //  每个item 都是绝对定位
}

.carousel-item:nth-child(1) {
  transform: rotateY(0deg) translateZ(312px);
}
.carousel-item:nth-child(2) {
  transform: rotateY(60deg) translateZ(312px);
}
.carousel-item:nth-child(3) {
  transform: rotateY(120deg) translateZ(312px);
}
.carousel-item:nth-child(4) {
  transform: rotateY(180deg) translateZ(312px);
}
.carousel-item:nth-child(5) {
  transform: rotateY(240deg) translateZ(312px);
}
.carousel-item:nth-child(6) {
  transform: rotateY(300deg) translateZ(312px);
}

WARNING

transform 书写有顺序要求!!!

例1：transform: rotateY(200deg) translateZ(-300px)

-> ：先按Y轴旋转200度，再向Z轴移动300px;

例2：transform: translateZ(-300px) rotateY(200deg)

-> : 先按Z轴移动300px，再向Y轴旋转200度

书写方式不同将导致 transform-origin 不一致，最终动画展示无法达到预期！！！