如何仅使用 CSS 创建三维对象

要想成为一名更优秀的 Web 开发者，你必须不断挑战自我，不断学习新知识。值得庆幸的是，我在Matise拥有非常优秀的同事，他们善于批判性思考，即使在自我隔离期间也始终对新技术充满好奇。例如，上周我学习了 Observer API，并在两个项目中实现了它。这周我想学习如何用 CSS 将对象变成三维物体，为了保持趣味性，我使用了 TARDIS 作为对象。

变换样式和平移 Z 轴

当然，我开始得比较简单；我做了一些研究，发现有几个 CSS 属性可以用来创建 3d 对象。

其中最重要的是transform-style，它有一个默认值，flat但需要设置为preserve-3d;才能使立方体成为立方体。否则，各个侧面将堆叠在一起。

该perspective属性允许您通过添加任意长度值来确定对象在 Z 平面上的距离，这听起来确实有点迷幻。增加透视量会使对象看起来更远。透视属性和透视变换函数之间也存在区别，说实话，这对我来说仍然有点不清楚。

您需要的最后一个属性是 transform 属性，它允许多个转换函数（如rotateY和rotateX），但也是translateZ为每个元素在 z 轴上分配位置的非常重要的属性。

使用旋转，您可以创建不同的视角并查看立方体的顶部。

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(1turn);
  // using a linear animation easing
  // to create an infinitely spinning cube
  animation: turn 12s linear infinite;

立方体有六个面（除非你把内部也算上，呵呵呵呵），所以我不得不添加 6 个 10x10em 的 div。不知怎么地，把 transformZ 设置为边宽的一半，就能创建一个漂亮的亮粉色立方体。

  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    background: hotpink;
    &.front {
      transform: translateZ(5em);
    }
    &.top {
      transform: rotateX(90deg) translateZ(5em);
    }
    &.right {
      transform: rotateY(90deg) translateZ(5em);
    }
    &.left {
      transform: rotateY(-90deg) translateZ(5em);
    }
    &.bottom {
      transform: rotateX(-90deg) translateZ(5em);
    }
    &.back {
      transform: rotateY(-180deg) translateZ(5em);
    } 
  }
}

时间和空间的相对维度

成功创建立方体后，我想是时候来点真正的玩意儿了：一个TARDIS。我之前创建过一个TARDIS，但它只有一个维度，这意味着它不够好，因为大家都知道Tardis应该旋转。 虽然TARDIS比立方体稍微复杂一些，但原理是一样的：在父元素和容器元素上设置，并添加6个面来进行变换。

perspective: 800px;transform-style: preserve-3d;

我最纠结的是屋顶之类的东西，以及一旦在父元素上设置了translateZ，子元素就无法再在z轴上平移了。或者说我哪里做错了，如果你知道是什么问题，请告诉我。

你也可以做到！

如果您使用 CSS 创建了任何三维内容，请告诉我，如果它来自神秘博士，则可以获得加分。:)