17

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 ?

hh54188
  • 14,887
  • 32
  • 113
  • 184

1 Answers1

40

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.

Anson
  • 6,575
  • 2
  • 39
  • 33