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

Question

我想执行以下操作：给定一个带透视的容器和一个带有translateZ值的内部元素，我想用translateY“拉起”，以便在视觉上触摸周围容器的顶部：{{ 3}}

在给定容器的透视值，元素的宽度和高度以及它的Z转换时，是否存在某种公式，我可以进行那种“顶部”计算？我一直在玩它，但我似乎无法找到它的规则，因为它们似乎都是变量。

感谢您的帮助。

Answer 1

是！

实际上找到偏移量的公式非常简单 - 维基百科上的3d Projection article有一个图表和公式。

公式为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，两个数字之间的差异是您需要添加到旧{{1} }}获取等效的新值。

此公式也适用于Y轴。

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

Answer 2

可能有（不要随便了解）但您是否尝试先更改-webkit-transform-origin:;，看看是否可以简单地在顶部应用转换，以便元素出现在您想要的位置而不进行翻译？