Search code examples
htmlcsstransformscale

I think CSS3 transform translateZ is equal to scale by some means

In some case, I think the translateZ and scale have the same effect ,just like zoom in or zoom out.

I think there are some calculate connection between them, if I konw one value of them, like translateZ(-1000px) and the parent perspective value, can I calculate the scale value that have the same effect equal to the translateZ ?

Solution

  • You are correct. As an object moves towards you (i.e. translateZ) it appears larger (i.e. scale).

    As shown in this diagram, perspective defines where the viewer is relative to the container and translateZ defines where the subject is relative to the container.

    diagram of translateZ

    The formula to go from scale to translateZ (and back):

    scale=perspective/(perspective-translateZ) -OR- enter image description here

    I'll leave the mathematical proof to a math whiz, but I did some checking with the pythagorean theorem and everything works out.

    Example:

    Let's say you're 100px from the container: #container { perspective: 100px; }

    1. If you translateZ(50px), the subject has moved halfway to you and will appear twice as large, making it 2x.
    2. If you translateZ(75px), the subject has moved another halfway closer and will double again, making it 4x.
    3. If you keep doing this, as you get closer to translateZ(100px), the subject will approach being to infinitely large.

    Try it out. Here's a JSFiddle to compare different examples visually.

    Limits:

    This works if the subject is moving directly towards you, but falls apart if you do things like rotate the subject in 3D space. There is math for that too, but it gets complicated. Check out 3D Projection on wikipedia.