3

我想做以下事情：给定一个带有透视图的容器和一个带有 translateZ 值的内部元素，我想用 translateY “拉起”它，以便在视觉上触摸周围容器的顶部：http://jsfiddle .net/8R4ym/129/

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

谢谢你的帮助。

4

2 回答 2

8

是的！

实际上有一个非常简单的公式可以找到偏移量 - 维基百科上的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从原点垂直偏移，而最初它是 offset -500px，这两个数字之间的差异是您需要添加到旧top值以获得等效的新值。

此公式也适用于 Y 轴。

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

于 2012-10-05T12:51:51.523 回答
0

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

于 2012-05-08T18:33:31.623 回答