How to get the property translateZ?

[shawnXiao]

hi:

Is there any materials which talk about why you choose translateZ(100px) in cube and translateZ(50px) in a box. And when I want do some 3d effects, how can I chose a proper value of translateZ.

thanks.

[dr-dimitru]

@shawnXiao I think you misunderstand the property purpose - translateZ - set distance of object from perspective point. Other words it defines position of object by Z axis.

The proper value depend from what are you doing in cube for closest side translateZ equal to width and height of other sides. In box for closest side translateZ equal to width left and right sides.

[shawnXiao]

@dr-dimitru thanks for your explains.I think I should get more materials to understand why we set translateZ to 100px in cube.especial the difference set before or after the rotate.

[dr-dimitru]

@shawnXiao It is obvious - as I said before until side closest to screen - it has translateZ equal to width/height of sides (in cube). But after rotation, for example to left translateZ of this side now equal to 1/2 (half) of width/height of sides (if transform origin is 50% 50% (center of side)). And if we will continue rotation to left then this side become opposite to screen - translateZ equal to 0 (or other words to translateZ value of front side minus width/height of sides), and translateZ values depend from perspective property value.

Once again explanation above is about cube.

[shawnXiao]

@dr-dimitru thanks for your help, I got it.Thank you very much.：）