你家有类似的水晶魔方吗？我第一次见到它的时候，就觉得这个东西真不错，所以我家现在有2个。不过一个已经坏掉了，坐车放在箱子里面，颠簸导致水晶的四个角都破损了，大家如果要携带一定要小心哦。

现在我们来制作一个永远不会破损的水晶魔方，用代码实现，要不代码出bug，永远不坏。

CSS3实现水晶魔方效果。

结构

水晶是一个正方体，所以有6个面，用html表示如下：

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="left"></li>
  <li class="right"></li>
  <li class="front"></li>
  <li class="back"></li>
</ul>

逐个击破

每个面都是一个正方形，所以我们对6个面用统一样式

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
}
.cube-inner li {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  background: red;
}

这样每个6个面都重叠在一起了，我们用transform，改变每个面的在空间上的位置。

在设置每个面之前，我们先使其整个魔方元素在3D空间呈现(transform-style: preserve-3d )，并旋转一下，看起来更方便。

.cube-inner {
  position: relative;
  margin: 200px auto;
  width: 100px;
  transform-style: preserve-3d;
  transform: rotateX(-33.5deg) rotateY(45deg);
}

正面

.cube-inner .front {
  transform: translateZ(50px);
  background: blue;
}

上面

.cube-inner .top {
  transform: rotateX(90deg) translateZ(50px);
  background: green;
}