CSS3: Transformations and Transitions

by Matt Montaruli on March 29, 2012

CSS3 introduces some flashy new effects, no JavaScript required.

While Transformations manipulate the shape and positioning of an element, Transitions allow one style to gradually change to another over a period of time.

Transformations

With CSS3 Transformations you can change the appearance of an element by rotating, scaling, moving or skewing it, all with CSS3 code.

I find these effects particularly cool to use as hover effects, but there are plenty of other uses. Here is how to style each:

transform: translate(x,y);

Moves an element along the x/y axis

transform: scale(x,y);

Increases or decreases the size of an element

transform: rotate(angle);

Rotates an element

transform: skew(x-angle,y-angle);

Skews an element

transform: perspective(n);

Changes the perspective of an element

Transitions

Transitions allow a gradual shift between one style to another, given a trigger such as hover.

For example, say on hover, you’d like the width of an element to change. Instead of the width instantaneously changing from one size to the next, you’ll see the width gradually grow or shrink.

This effect can be coded in the following way:

  1. Set the element’s original style.nav li {width: 100px}
  2. To set the transition, select an element the way you normally would in css, somewhere after the original style.nav li {width: 100px;}
    .nav li {}
  3. Within the style brackets, identify the transition you’d like, by defining: transition-property (style to change) and transition-duration (in seconds). You can also use shorthand:.nav li {width: 100px;}
    .nav li {transition: width 2s;}
  4. Right below this, enter the style you’d like to change the element to:.nav li {width: 100px;}
    .nav li {transition: width 2s;}
    .nav li:hover {width: 300px;}

That’s it! Now your li width should increase gradually (over 2 seconds) on hover.

CAUTION: Browser Compatibility

The above styles are not yet fully supported even in modern browsers. IE doesn’t support Transitions at all, and each browser will require their specific prefix for each of these effects: -ms-, -o-, -moz-, -webkit-.

Find any creative uses for the above CSS3 styles? Let us know in the comments below.