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

Question

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

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

Answer 1

你是对的。当一个物体向你移动时（即translateZ），它会显得更大（即scale）。

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

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

-或-

我将把数学证明留给数学高手，但我用pythagorean theorem 做了一些检查，一切正常。

示例：

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

1. 如果您translateZ(50px)，则主题已向您移动了一半，并且将显示两倍大，使其变为 2 倍。
2. 如果您translateZ(75px)，则主题已另一个移动了一半，并将再次加倍，使其变为 4 倍。
3. 如果您继续这样做，随着您接近translateZ(100px)，主题将接近无限大。

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

限制：

如果拍摄对象直接向您移动，这会起作用，但如果您在 3D 空间中旋转拍摄对象，则会崩溃。也有数学，但它变得复杂。在维基百科上查看3D Projection。