Today I learned the meaning of preserve-3d

Today, I played around with some CSS animations and 3D transformations.

Something like that was my result (but a little bit cooler, with SVG background images, to resemble the corporate logo).

http://plnkr.co/edit/4KkYkviUIWMGaEPV65aC?p=preview (works in current Chrome, others browsers: I don't know.)

There was a thing, that irritated me: I could not get my 3D-cube to look like a cube, and not like a silly piece of art by an 8-grader. The magic lies in this small statement, I did not really understand before:

transform-style: preserve-3d;

I did not understand this.

But then I learned, that there is nothing complicated on this. There are basically only two values (besides stuff like "inherit") you should remember: preserve-3d and flat.

flat is the default setting, making the elements being positioned on the 2D plane, preserve-3d allows the elements to be positioned in 3D space. Wow.

So what do I do with this ground-breaking insight? I don't know. But I think that such small portions of understanding of minor details do sum up, resulting in a huge difference over time. So I will play some more with CSS 3D transformations, to learn even more stuff about CSS.

So long, keep on learning.

Lorenz