相信有许多的朋友在学3D转换的时候很懵，或者学完之后想做个小练习获得成就感鼓励自己，再或者想更理解透彻。做完这小练习相信大家一定会有所收获。废话不多说了，直接开始：

构建基本架构

HTML代码：

<div class="preserve">
  <div class="front">前</div>
  <div class="back">后</div>
  <div class="top">上</div>
  <div class="bottom">下</div>
  <div class="left">左</div>
  <div class="right">右</div>
</div>

相信大家玩过魔方以及在小学的时候学过立方体展开，上面代码都能理解。

添加CSS样式

.preserve>div{
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  position: absolute;
}
.preserve {
  width: 200px;
  height: 200px;
  position: relative;
  top:300px;
  left:300px;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-25deg);
}

这里主要是使用transform-style允许子元素以3D方式显示，transform调整立方体角度方便能更清楚看懂后续操作。

.front{
  background: red;
  transform: translateZ(100px);
}

大多数玩魔方的朋友都有拆过魔方，一共有三根轴并相交一个点。我们把面对到后面的那跟轴线称为Z轴，左边到右边称为X轴，上边到下边的称为Y轴，轴相交的点称为交点。最初始状态六个面是在这个点上。
这里主要是将一个面在Z轴上，向着你眼睛的方向（离你越来越近）移动200像素。

.back{
  background: greenyellow;
  transform: translateZ(-100px);
}

.top{
  background: yellow;
  transform: rotateX(90deg) translateZ(100px);
}

这里是对立方体顶部的操作，大家可以把收放在面前，掌心对着自己，现在是就是板块的初始状态。transform的第一个值是将板块围绕着X轴旋转90°，相当于手掌的上边向后倒90°，第二个值是板块沿着Z轴运动200像素，相当于手掌向上运动一段距离。相信大家很疑惑，为什么是沿着Z轴不应该是Y轴吗。其实每个板块都是有自己的轴线，当我们对板块旋转时，自身的轴线也跟着旋转。

.bottom{
  background: violet;
  transform: rotateX(270deg) translateZ(100px);
}
.left{
  background: #4dd3;
  transform: rotateY(270deg) translateZ(100px);
}
.right{
      background: #a53952;
      transform: rotateY(90deg) translateZ(100px);
}

完毕

标签：translateZ,100px,transform,HTML,background,立方体,200px,CSS,3D
来源： https://www.cnblogs.com/lirenye/p/15793396.html