CSS3动画之3D立方体讲解

效果

坐标图

实现

1. 设置3D容器，基本结构

<div class="view">
  <div class="box">
    <div class="one">A</div>
    <div class="two">B</div>
    <div class="three">C</div>
    <div class="four">D</div>
    <div class="five">E</div>
    <div class="six">F</div>
  </div>
</div>

.view {
  width: 160px;
  height: 160px;
  margin: 80px auto;
}
.box {
  transform-style: preserve-3d; // 开启3d
  perspective: 200px; // 透视
  transform-origin: 80px 80px 0; // 设置旋转中心点
}
.box div {
  box-sizing: border-box;
  position: absolute;
  height: 160px;
  width: 160px;
  border: 3px solid #000;
  background: rgba(255, 200, 100, .8);
  text-align: center;
  font-size: 130px;
}

2. 将6个面放到相应的位置（注意 transform 组合变形，是从右到左，先后不同，结果不同）

.box .one {
  transform: translateZ(80px);
}

.box .two {
  transform: rotateX(-90deg) translateZ(80px);
}

.box .three {
  transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
}

.box .four {
  transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
}

.box .five {
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
}

.box .six {
  transform: rotateY(90deg) translateZ(80px);
}

3. 动起来

.box {
  animation: doit 3s ease-in-out infinite;
}

@keyframes doit {
  16% {
    -webkit-transform: rotateY(-90deg);
  }

  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(135deg);
  }

  50% {
    -webkit-transform: rotateY(225deg) rotateZ(135deg);
  }

  66% {
    -webkit-transform: rotateY(135deg) rotateX(135deg);
  }

  83% {
    -webkit-transform: rotateX(135deg);
  }
}

4. 去掉 透视

.box {
  transform-style: preserve-3d; // 开启3d
  perspective: 200px; // 透视
  transform-origin: 80px 80px 0; // 设置旋转中心点
}