Using CSS Transforms and Transitions

These two CSS properties are the two I am really excited about. Before we continue though please note that I am going to be using live examples and currently while the transform properties work in FF 3.6, the transition properties will only work in Opera & Webkit browsers. FF 4 has now been released so I’ve updated the post to add support for it.

CSS Transforms

First let’s take a look at transforms. These examples should work in the latest versions of Mozilla & Webkit browsers. IE support? Well of course not.

Rotate

Let’s start with rotate. You can, as far as I’m aware, apply these transforms to any element you like, but for simplicity I’m going to stick to an image [1].

There you go, an image that has been rotated 45 degrees clockwise.

Okay. One thing you need to understand about transforming elements is that they act as if they are relatively positioned. What does this mean? Well let me call upon my friend Mr. Diagram to help out.

As you can see, like a relatively positioned element, it still takes up the space in the document flow it held before it was rotated. So if, for example, you floated the element to the right and had text flow around it, the text would flow until it hit the blue line (in the image) not the rotated element.

Now. I know what you’re thinking. How the hell did you rotate the image? Well I’m getting to that now, I just wanted to make sure you understood that little quirk(?) first. To rotate the image we need to use browser specific CSS properties so remember -moz- for Mozilla, -webkit- for Webkit, and -o- or no prefix in some cases for Opera.

As pointed out by various people it is a good idea to use the non-prefixed property so nothing breaks when browsers finally move from browser prefixes to standardized properties.

Rotate takes any numbered value from 0 upwards with ‘deg’ appended. It will recognise well above 360° so that transform combined with transition can tell how many full rotations you have made.

Scale

Scale is slightly different from using width & height in that it reduces or increases the size of an element using a decimalized percentage (1 = 100%, 0.5 = 50% etc) and uses the original width & height of the element as it’s starting. Here is an example.

This time I have scaled the image down by 0.8 that is the equivalent of 80% of the original width & height. The CSS looks like this:

Scale also has the same quirk/problem with document flow that was discussed earlier.

Translate

Translate allows you to move (translate) an element using a pixel or percent value. Here is an example.

It does pretty much exactly the same as positioning an element relative & then using top and left to move it’s position. Again translate has the document flow quirk/problem as mentioned earlier. Here is the CSS:

Skew

Skew allows you to twist an element to a certain angle around one or both of it’s axes. Here is the example.

This image has a skew of 4° on the X axis (left->right) and 10° on the Y axis (up->down). Here is the CSS that did it:

Additional Notes

Something to note is that all of the transform functions I have just covered have separate axis functions that allow you to effect 1 axis only. They are simply the normal function with a capitalized axis letter after it. For example scaleX() or skewX().

Also of note is the fact you can string together many transform functions together separating them with white-space, like so:

Transitions

Transitions allow you to animate CSS properties without any Javascript. Very, very handy. Let’s take a look at how it works.

N.B: All the following animations are triggered by hover & will work in FF 4, Chrome, Safari, and Opera.

The Basics

Here is a basic transition example, hover over it to check it out.

A simple but elegant opacity transition. Here is the CSS to make it happen:

You may have guessed how it works, but if you haven’t it works like this. You set which properties you wish to animate, how long it should take & what type of easing should be used. Then you set that property to a different value in the hover state & when hovered it animates to it. You can also have it animate on click by using event listeners. You can find more by looking at the Opera image gallery examples source code as it’s beyond the scope of this tutorial.

Getting More Advanced

You can also transition multiple properties. It can look something like this.

I don’t know about you, but I think that’s pretty damn good when you consider we haven’t wrote a scrap of Javascript to achieve it. Here is the CSS used to create it:

It works in exactly the same way before, except we have supplied the transition property with an additional property to transition (animate). You can do as many as you like & they are separated by commas (,). Also you need to set a different value for the property you are transitioning in the hover state. In this case it changes the opacity (which we have set first) from 0.5 to 1 and the scale from 1 (which is the default) to 1.4 (or 140%) of it’s size.

Even More Properties

You can even transition background colors like this.

The CSS looks like this:

As you can see it’s as simple as adding the background-color property to the transitions. I could go on & on, but I think you get the idea.

Limitations

Well obviously none of the properties here will work in Internet Explorer. Transforms will now work in most major browsers, which now includes Firefox as of version 4.

I hope this post has helped you out and, although they aren’t supported by all browsers yet, has encouraged you to try out these exciting CSS properties. Hopefully we’ll see transitions & transforms being used more and more in the future.

As always if you have any questions, or problems let me know in the comments. Also our server bill is due soon so if this post has helped you please consider donating to help keep the site alive.

[1] – Image is of Doctor Who star Karen Gillan. © unknown found via Google. No infringement meant. Please contact me if you would like me to remove the image.

CSSScaleTransformTransitionTranslate