12 : 2D Transformations

Examples

  • Figure 12-1: An element rotated by −15 degrees
  • Figure 12-2: The effect of a transformed element on the document flow
  • Figure 12-4: Different transform-origin values on a rotated element
  • Figure 12-5: An element positively translated along both axes
  • Figure 12-6: Elements showing effects of different values in the translate() function
  • Figure 12-7: The effects of different values in the scale() function
  • Figure 12-8: Elements transformed by different values in the skewX() and skewY() functions
  • Figure 12-9: Examples of transformations made with the matrix() function

Browser Support

Chrome Firefox Safari IE
2D transformations Yes Yes Yes* IE9*,IE10
  • * Requires vendor prefix.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.

Unless otherwise stated, all content on this website is © Peter Gasston and/or No Starch Press.