如何以数学方式计算要应用于 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 对象的最佳解决方案

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

Answer 1

是的，虽然很乏味，但可以计算出准确的数字。

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

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

关于你用CSS做3d图形的特殊方法，我觉得没有错，只是很难正确地做，因此不太实用，至少对于初学者来说不是3d 图形和动画。不过还是有学习价值的。

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

How do I calculate mathematically the transform 3D I to be applied on my CSS?

html

css

3d

css-transforms