Having problem with the 3D transformation lessons

Question

What exactly is this code supposed to do https://code.sololearn.com/WlrN5TRp8avg/?ref=app

Answer 1

The answer is in the above css rule:

transform: translateX(29px) translateY(5em) translateZ(-13px);

This will translate (move) the target element (your <div>) 29px to the right, 5em down and... nothing else, while you doesnt't provide a value for the 'perspective' property on a parent element ^^ Else, it will "move" virtually the element on the z axis, and displaying it with perspective deformation... (if not rotation added, the visible result will be to zoom-in/out the element and shift it if not centered relatively to the perspective origin)

Try with:

<div style="perspective:500px;"><div id="mybox1"></div></div>

... it would be a better starting point to observe behaviour of css 3D transform features (and play with rotation, it's more impressive ;))

Simple (but a bit advanced css) 3D demo with only pure Css:

https://code.sololearn.com/WOOZro8mLsLj/?ref=app