我认为CSS3变换translateZ在某种程度上等于规模

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投影.