Transforms

Figures

1. The three Cartesian axes used in CSS transforms
2. Elemental frames of reference
3. The spherical coordinate system used in CSS transforms
4. Rotations around the three axes
5. Rotations in the xy plane
6. A transformed div element
7. Different transform lists, different results
8. Overwriting or modifying transforms
9. Translating in two dimensions
10. Translating in three dimensions
11. Scaled elements
12. Rotations around the three axes
13. Rotations around 3D vectors
14. Rotation around a 3D vector, and how that vector is determined
15. The difference between rotating around two axes and rotating around a 3D axis
16. Skewing along the x- and y-axes
17. Skewed elements
18. Different perspective pyramids
19. The effects of varying perspective values
20. A matrix-transformed element and its functional equivalent
21. A matrix3d-transformed element and its functional equivalent
22. Various origin calculations
23. The rotational effects of using various transform origins
24. The skew effects of using various transform origins
25. A 3D-transformed inner div
26. The effects of a flat transform style
27. The effects of a 3D-preserved transform style
28. Shared perspective versus individual perspectives
29. A basic “ruler”
30. A basic “ruler” with different perspective origins
31. Visible and hidden backfaces
32. Photo on the front, information on the back