What is the formula for proportions of elements using perspective and translateZ?

I would like to do the following: Given a container with perspective and an inner element with a translateZ value I’d like to “pull it up” with translateY in order to visually touch the top of the surrounding container: http://jsfiddle.net/8R4ym/129/

Is there some kind of formula that, given the perspective value of a container, the width and height of an element and it’s Z-translation I can get to that kind of “top” calculation? I have been playing around with it but I can’t seem to find some rules for it, as it seems that those are all variables.

Thanks for any help.

Problem courtesy of: Seka

Solution

Yes!

There’s actually quite a simple formula for finding the offset – the 3d Projection article
on Wikipedia has a diagram and the formula.

The formula is bx = ax * bz / az
where:

  • ax
    is the original distance from the transform origin point
  • az
    is the perspective + the negative translateZ
  • bz
    is the perspective

and this will give you:

  • bx
    – the new distance from the transform origin point

So, you need to know:

  • bz
    : the perspective
    (eg: 1000px
    )
  • ax
    : the offset from the transform origin point, eg: if the origin point is 50% then this needs to be the element’s top
    relative to the center of the parent element ( parent.height/2 + element.top
    ) — let’s say -500px
  • z
    : the element’s translateZ
    (eg: -600px
    )
  • az
    is then bz + z * -1
    , in this case: 1000 + (-600 * -1) = 1600

so the formula is: -500 * 1000 / 1600 = -312.5

The element is offset vertically -312.5px
from the origin, whereas originally it was offset -500px
, the difference between the two number is what you’ll need to add to the old top
value to get the equivalent new value.

This formula also works for the Y axis.

I put together a quick example here: http://jsfiddle.net/trolleymusic/xYRgx/

Solution courtesy of: Trolleymusic

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » What is the formula for proportions of elements using perspective and translateZ?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录