CSS3d实现砸金蛋转盘效果

效果

1. 金蛋布局

别问为什么套这么多层div，一会有用- -！，这里主要介绍的是蛋平均分布的css代码

<div class="container">
  <div class="scene">
    <div class="egg-wrapper">
      <div class="egg">蛋1</div>
    </div>
    <div class="egg-wrapper">
      <div class="egg">蛋2</div>
    </div>
    <div class="egg-wrapper">
      <div class="egg">蛋3</div>
    </div>
  </div>
</div>

  .scene {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin: 50px auto;
  }
  .egg {
    width: 50px;
    height: 70px;
    line-height: 100%;
    background-color: gold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

这是当前页面，下面开始把蛋平均分布在圆环上

• 计算蛋的旋转角度，360度，3个蛋就每个120deg
• 定位圆心处
• 绕z轴旋转对应的角度
• 偏移半径

  .scene {
    position: relative;
  }
  .egg-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 长宽的一半 */
    margin-top: -35px; 
    margin-left: -25px;
    /* 不能这么用，下面会覆盖 animation里面的translate会覆盖*/
    /* transform: translate(-50%, -50%);  */
   }
   
   /* rotateZ 注意理解坐标系，度数为圆的分布角度，x值为圆的半径 */
   .egg-wrapper:nth-child(1) .egg {
    transform: rotateZ(90deg) translateX(100px);
  }
  .egg-wrapper:nth-child(2) .egg {
    transform: rotateZ(210deg) translateX(100px);
  }
  .egg-wrapper:nth-child(3) .egg {
    transform: rotateZ(330deg) translateX(100px);
  }

注意css 3d的坐标系

2. 写轮眼？ 摩天轮？

    .scene {
      animation: spin 6s infinite linear;
    }
    @keyframes spin {
      to {
        transform: rotateZ(360deg);
      }
    }

写轮眼动起来

让蛋竖起来，保持垂直效果，摩天轮？

    .egg-wrapper:nth-child(1) {
      transform: rotateZ(90deg) translateX(100px) rotateZ(-90deg);
    }
    .egg-wrapper:nth-child(2) {
      transform: rotateZ(210deg) translateX(100px) rotateZ(-210deg);
    }
    .egg-wrapper:nth-child(3) {
      transform: rotateZ(330deg) translateX(100px) rotateZ(-330deg);
    }

三个蛋整体顺时针旋转，为了什么保持上把的垂直效果，蛋自身需要反转，抵消旋转

    .egg {
      animation: spin-reverse 6s infinite linear;
    }
    
    @keyframes spin-reverse {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(-360deg);
      }
    }

-

3. 回归主线，3d旋转金蛋转盘

先说清楚原理， 在一个地平面上有一个转盘，三个蛋垂直转盘，人45度俯视的感觉

• 转盘调整为水平面上，就相当是.scene rotateX 90deg
• 再把蛋立起来 .egg-wrapper rotateX -90deg
• 转盘旋转 rotateZ .scene 0 -> 360deg 因为整体rotateX（90deg) 此时Z朝上;
• 蛋反转 rotateY .egg 0 -> 360deg 因为rotateX -90deg 蛋的Y轴朝上
• 开启3d transform-style: preserve-3d
• 调整3d 视角 .container perspective-origin: center top;