O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS3 2D transformations

Despite sounding similar, CSS transformations (both 2D and 3D variants) are entirely different to CSS transitions. Think of it like this: transitions smooth the change from one state to another, while transformations are defining what the element will become. My own (admittedly childish) way of remembering it is like this:

Imagine a Transformer robot like Optimus Prime. He's a robot that becomes something else (transforms) over a period of time (the transition) into a truck.

In case that tangent muddied the waters further (or you don't have a clue who Optimus Prime is) let's just dig in. Let's add a 2D transition to the hover state of the navigation links on the AND THE WINNER ISN'T site:

nav ul li a:hover { transform: scale(1.7); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required