Geek asks and answers

What is the formula for element proportions using perspective and Z translation?

I would like to do the following: given the container with the perspective and the inner element with the value translateZ, I would like to “pull up” it with translateY to visually touch the top of the surrounding container: http://jsfiddle.net/8R4ym/129/

Is there any formula that, given the perspective value of the container, the width and height of the element and its Z-translation, I can get for such an "upper" calculation? I play with this, but I can’t find some rules for it, as it seems that these are all variables.

Thanks for any help.

+3
source share
2 answers

Yes!

- 3d Projection .

bx = ax * bz / az :

  • ax -
  • az - + translateZ
  • bz -

:

  • bx -

, :

  • bz: perspective (: 1000px)
  • ax: , : 50%, top (parent.height/2 + element.top) - let -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/

+8

( ), -webkit-transform-origin:;, , , , , ?

0

More articles:


All Articles