In CSS's representation of Euclidean 3D space, X,Y,Z coordinates start at top left of a computer screen, with the positive direction of the Y axis facing down at a 90° angle), and the X axis horizontally parallel to the top of the screen.
This has the effect of forcing a developer to calculate Y values in reverse. It also tends to making -X values vanish off screen.
It's tricky business to responsively center the XYZ coordinates of a shape to the exact center of a screen, whose dimensions can constantly change via window resizing or being rendered on devices with different screen resolutions.
CSS's cascading rule order and multiplicity of attributes influence the positioning of elements and can often result in dynamic inter-actions that are not always well understood.
This is why many real world HTML/CSS are driven by elaborate workflow JS scripts and HTML preprocessor-driven "make files" that enforce predetermined CSS rules and class hierarchies and eliminate the need for individual programmers to spend much time figuring out a site's overall page architecture.
With framework grids and JS libraries, positioning of elements becomes a plug and play function call game; the result is typically unreadable but easy-to-maintain (via inhouse worflow rules that have to be developed and taught) source code.
In effect, the art of handcoded CSS gets buried under the avalanche of front end design tools and programmatic interfaces. Nevertheless, it remains important to at least know the basic rules of the game; though hand coding CSS sites is probably becoming more of a solitary, artisanal endeavor. Some things can still only be learned through trial and error. It is obvious, for instance, from the examples in the embedded Pen that the real world usefulness of negative X and Y rotations is limited, to put it charitably.
However, it is worth noting that rotating at 90 degrees along the X or Y axis causes a shape to vanish off the screen, which can be a useful trick to use when rotating polygons in 3D and making it appear that one side morphs into another during a transform.
Please note that the source code of the embedded pen contains many comments that explain some of the layout subtleties being demoed in connection with CSS3 3D transforms.


31 0 0