使用perspective和translateZ的元素比例的公式是什么？

Question

我想做以下事情:给定一个带透视的容器和一个带有translateZ值的内部元素,我想用translateY"拉起来"以便在视觉上触摸周围容器的顶部:http:// jsfiddle达网络/ 8R4ym/129 /

是否存在某种公式,给定容器的透视值,元素的宽度和高度以及它的Z-平移我可以得到那种"顶部"计算？我一直在玩它,但我似乎无法找到它的一些规则,因为似乎这些都是变量.

谢谢你的帮助.

Answer 1

是!

实际上有一个非常简单的公式来找到偏移量 - 维基百科上的3D Projection文章有一个图表和公式.

公式是bx = ax * bz / az:

• ax 是距变换原点的原始距离
• az 是观点+负面 translateZ
• bz 是透视

这会给你:

• bx - 距变换原点的新距离

所以,你需要知道:

• bz:在perspective(例如:1000px)
• ax:变换原点的偏移量,例如:如果原点是50%那么这需要是元素top相对于父元素的中心(parent.height/2 + element.top) - 让我们说-500px
• z:元素的translateZ(如:-600px)
• az那么bz + z * -1,在这种情况下:1000 + (-600 * -1) = 1600

所以公式是: -500 * 1000 / 1600 = -312.5

元素-312.5px从原点垂直偏移,而最初它是偏移的-500px,两个数字之间的差异是您需要添加到旧top值以获得等效的新值.

该公式也适用于Y轴.

我在这里放了一个简单的例子:http://jsfiddle.net/trolleymusic/xYRgx/