html - 我认为CSS3转换translateZ在某种程度上等于比例尺

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

我认为它们之间存在一些计算连接，如果我知道它们的一个值(例如translateZ(-1000px)和父perspective值)，是否可以计算出与scale效果相同的translateZ值？

最佳答案

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

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



从小数到平移Z的公式:

-要么-

我将把数学证明留给数学专家，但是我对pythagorean theorem进行了一些检查，一切正常。

例:

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

如果您使用translateZ(50px)，则主题已向您移动一半，并且将显示两倍大，使其变为2倍。

如果您使用translateZ(75px)，则主题又移近了一半，并将再次翻倍，使其变为4倍。

如果您继续这样做，则随着您接近translateZ(100px)，主题将趋于无限大。

试试看。这是JSFiddle，用于在视觉上比较不同的示例。

限制:

如果对象直接向您移动，这将起作用，但是如果您进行诸如在3D空间中旋转对象之类的操作，它就会崩溃。也有数学运算，但是变得复杂。在Wikipedia上查看3D Projection。

关于html - 我认为CSS3转换translateZ在某种程度上等于比例尺，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11313783/