Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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 ?

Problem courtesy of: hh54188

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.

The formula to go from Scale to Translatez (and back):

-OR-

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.

Solution courtesy of: Anson

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×