Transforms

Chapter 17

Figures

  1. The three Cartesian axes used in CSS transforms
  2. Elemental frames of reference
  3. Rotations in the xy plane
  4. The spherical coordinate system used in CSS transforms
  5. Rotations around the three axes
  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. A matrix-transformed element and its functional equivalent
  19. A matrix3d-transformed element and its functional equivalent
  20. Different perspective pyramids
  21. The effects of varying perspective values
  22. Various origin calculations
  23. Rotational effects using various transform origins
  24. Skew and scale effects using various transform origins
  25. A square rotated around the SVG origin and its own origin
  26. A 3D-transformed inner div
  27. The effects of a flat versus 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