How does translatedZ works?

Question

I can't see any changes, using transform: translateZ().

Answer 1

To use Css 3D transforms, you need at least to have defined a 3D context: a container with a css rule defining the 'perspective' property...

More stuff about: https://desandro.github.io/3dtransforms/

Answer 2

Here is a nice ressource with an illustration of the css 3d coordinate system: https://www.smashingmagazine.com/2016/07/front-end-challenge-accepted-css-3d-cube/

The reason why you cannot see any changes is that the z-axe points in the direction of the screen. Furthermore, you should move on to the next page in Sololearn which tells you more about "perspective" and that a container has to be defined at first. Otherwise, you won't see any 3d effect.

Answer 3

it's for 3d, you have x, y, z axis z is for depth. So when you are trying to translate something flat by Z axis you won't see the difference.