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

是的，尽管很繁琐，但可以计算出准确的数字。

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

说实话，您越了解数学，就可以在计算机图形学中做得更好。因此，您应该了解的知识数量没有限制，只要尝试从与上述问题相关的所有与您发现的问题相关的领域中学习尽可能多的数学即可。

关于使用CSS制作3d图形的特定方法，我认为这没错，以这种方式正确地做到这一点很困难，因此不是很实用，至少对于3d图形和动画的初学者而言。但是对于学习还是有价值的。

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

1 个答案: