Transforms in CSS

If you've ever positioned an object, whether relatively or absolutely, then you've already transformed an object. For that matter, any time you used floats or negative-margin tricks (or both), you transformed an object. All of those are examples of translation, or the movement of an element from where it would normally appear to some other place. With CSS Transforms, you have a new way to translate elements, and a whole lot more besides. Whether it's as simple as rotating some photographs a bit to make them appear more natural, or creating interfaces where information can be revealed by flipping over elements, or just doing interesting perspective tricks with side bars, CSS Transforms can - if you'll pardon the obvious expression - transform the way you design.

---

Present information in stunning new ways by transforming CSS elements in two- and three-dimensional space. Whether you’re rotating a photo, doing some interesting perspective tricks, or creating an interface that lets you reveal information on an element’s backside, this practical guide shows you how to use them to great effect.

Short and sweet, this book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. Learn how to bring life to your web pages now.

Topics included:

• Create interesting combinations of 2D transforms and fully 3D-acting interfaces
• Learn two types of coordinate systems used in CSS transforms: the Cartesian coordinate system and the spherical system
• Use the transform property to translate, scale, rotate, and skew an element
• Create the illusion of depth by adding perspective to an element—or one perspective to a group of elements
• Reveal the back of an element with the backface-visibility property