html - 如何以数学方式计算要应用于我的 CSS 的 3D 变换？

Question

我使用 CSS 模拟了一个 3D 对象:a test

body {
  background-color: black;
}

div#one,
div#two,
div#three {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: grey;
}

div#one {
  transform: rotateX(70deg) rotateZ(45deg);
}

div#two {
  background-color: rgb(150, 150, 150);
  top: 119px;
  left: -70px;
  transform: rotateX(20deg) rotateY(45deg);
}

div#three {
  top: 119px;
  left: 70px;
  transform: rotateX(-20deg) rotateY(45deg);
  background-color: white;
}

<div id = "one">
</div>

<div id = "two">
</div>

<div id = "three">
</div>

旋转和顶部或左侧的所有这些度数都是通过反复试验获得的。这种方法花了我太多时间才弄好，而且我认为这不是使用 CSS 模拟 3D 对象的最佳解决方案。

1. 是否可以进行数学计算，以便获得我需要用作转换值的确切数字？
2. 如果确实可行，我需要哪些数学基础知识？能否举例说明上面例子中的其中一个值的计算方法？
3. 使用我上面的方法来尝试获得 3D 对象模拟是否是一种好的做法？我应该改用其他东西吗，例如 gif？谁能建议我正确的方向？提前致谢...

Answer 1

是的，可以计算出准确的数字，尽管这很乏味。

要做到这一点，您至少需要了解空间和平面中的欧几里得几何以及线性代数的基础知识，例如向量空间和仿射变换。

老实说，您了解的数学越多，您在计算机图形学方面的表现就越好。所以你应该知道多少是没有限制的，只要尝试从你发现与你所面临的问题相关的所有领域中学习尽可能多的数学，而不是上面列出的主题。

关于您使用 CSS 制作 3d 图形的特殊方法，我认为这并没有错，只是很难以这种方式正确地完成，因此不太实用，至少对于 3d 图形和动画的初学者来说不是。但仍然具有学习值(value)。