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

Question

我想执行以下操作:给定一个具有透视图的容器和一个具有 translateZ 值的内部元素，我想使用 translateY 将其“拉起”，以便在视觉上触摸周围容器的顶部:http://jsfiddle.net/8R4ym/129/

是否有某种公式，在给定容器的透视值、元素的宽度和高度及其 Z 平移的情况下，我可以进行那种“顶部”计算？我一直在玩弄它，但我似乎找不到它的一些规则，因为这些似乎都是变量。

感谢您的帮助。

Answer 1

是的!

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

公式是 bx = ax * bz/az 其中:

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

这会给你:

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

所以，你需要知道:

• bz :透视(例如: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/