13 : 3D Transformations

Examples

  • Figure 13-2: A rotation of 45 degrees around each of the three axes
  • Figure 13-3: Rotation using directional vectors with the rotate3d() function
  • Figure 13-4: The effects of different perspective() function values
  • Figure 13-5: Translation in different directions along the z-axis
  • Figure 13-6: Scaling on different and multiple axes
  • Figure 13-7: Transformations applied with the matrix3d() function
  • Figure 13-8: Different values for the perspective-origin property
  • Figure 13-9: Different transform-origin values on a transformed element
  • Figure 13-10: Comparing the effects of different values for the transform-style property
  • Figure 13-11: Demonstrating the backface-visibility property

Browser Support

Chrome Firefox Safari IE
3D transformations Yes Yes Yes* IE10†
  • * Requires vendor prefix.
  • † No support for the preserve-3d value for transform-style.

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.