html - 我认为 CSS3 transform translateZ 在某种程度上等于 scale

Question

在某些情况下，我认为translateZ和scale具有相同的效果，就像放大或缩小一样。

我认为它们之间有一些计算联系，如果我知道它们中的一个值，比如translateZ(-1000px)和父perspective值，我可以计算出scale具有相同效果的值等于translateZ？

Answer 1

你是对的。当一个物体向你移动时（即translateZ），它看起来更大（即scale）。

如此图所示，perspective定义了查看者相对于容器的位置，并translateZ定义了主题相对于容器的位置。

从 scale 到 translateZ（和返回）的公式：

-或者-

我将把数学证明留给数学高手，但我对勾股定理做了一些检查，一切都解决了。

例子：

假设您距离容器 100px：#container { perspective: 100px; }

1. 如果你translateZ(50px)，对象已经向你移动了一半，并且将出现两倍大，使其成为 2 倍。
2. 如果你translateZ(75px)，对象又移动了一半，并且将再次加倍，使其成为 4 倍。
3. 如果您继续这样做，随着您越来越接近translateZ(100px)，主题将接近无限大。

试试看。这是一个JSFiddle，可以直观地比较不同的示例。

限制：

如果对象直接向您移动，则此方法有效，但如果您执行诸如在 3D 空间中旋转对象之类的操作，则此方法会分崩离析。也有数学，但它变得复杂。查看维基百科上的3D 投影。