Transforms

Chapter 16

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