CSS Transformations

CSS3 offers a way to adjust the elements on your web page so that they look different from their default values. You can transform elements in various ways:

• change where the element is on the page (translate)
• change the orientation of the element (rotate)
• change the shape (skew)
• change the size (scale)

And for all you math fans, you can also use transformation matrices to transform your elements. There is also a matrix filter for Internet Explorer, but it’s not a good idea to use filters because they slow your pages down.

Browser Support for CSS Translations

Like most CSS3 features, not all browsers support transformations equally. It is most effective to add these features to your site as enhancements rather than as required elements. Then if a browser doesn’t support it, they just don’t see it. But transformations have better support than transitions:

• Safari and Chrome (webkit) have supported 2D transformations since version 3.1 and 3D transformations were added to Chrome 12 and Safari 4. They use the -webkit- prefix.
• Firefox has supported 2D transformations since version 3.5 and 3D in version 10. It uses the -moz- prefix.
• Opera added 2D transformation support to version 10.5, but does not yet support 3D transformations. It uses the -o- prefix.
• Internet Explorer 9 supports 2D transformations and version 10 supports 3D transformations. It uses the -ms- prefix.

How to Use CSS Transformations

The CSS transform property takes one value: the transformation function. And if you want to transform your element in several ways, you can separate multiple transformation functions with a comma. E.g.

transform: transformation-function, transformation-function;

As mentioned above, there are five ways to transform your elements using 11 transformation functions:

• rotate
• scale
• scalex
• scaley
• skew
  • skewx
  • skewy
• translate
  • translatex
  • translatey
• matrix

Rotate Elements on a 2D Plane

Adding rotation to your elements gives your designs a more whimsical look, less gridded. You can rotate elements to the left or right using degrees. 0 degrees is the default—upright. To rotate an element 45 degrees:

transform: rotate(45deg);

See a rotation example.

Scale Elements Larger and Smaller

Using the scale transformation, you can change the size of your elements. The default value is 1 or 100%. You can scale the x and y sizes separately by including two values (x, y) in the transformation function. If you use just one value, it is assumed that both x and y scaling will be the same.

In other words transform: scale(2); is the same as transform: scale(2,2); and will scale the element to be twice as large on both the x and y axes.

If you want your element to get smaller, you would use a value smaller than 1. For example, transform: scale(0.5); will make the element half as large on both x and y axes.

You can also scale just one axis to stretch your elements using the scalex and scaley properties. To make an element twice as tall, you would write:

transform: scaley(2);

See some scale examples.

Elements Don’t Have to be Square

With the skew transformation function, you can turn your squares into parallelograms and move the contents with them. This makes it much easier to create 3D effects without needing 3D.

Just like the scale function, you can set two values to the skew function to affect the x and y axes or you can use one value to affect both equally. So skew(15deg,15deg) is the same as skew(15deg). You can also use the skews and skewy properties to set just these axes.

To skew a box 5 degrees on the x-axis and 10 degrees on the y-axis, you write:

transform: skew(5deg,10deg);

And to skew a box 15 degrees on just the x-axis or just the y-axis, you write:

transform: skewX(15deg);
transform: skewY(15deg);

See skew examples.

Moving Elements with the Translate Function

If you want to move your elements, you can do this easily with the translate() function. This function takes two values, the length the element should move on the x and y axes. If the second value is not included, it is assumed to be zero, and the element will only move on the x-axis (right and left), so translate(50px,0px) is the same as translate(50px).

If you want to move your element on one axis only, you can use the translatex and translatey functions.

To move an element right 100px and up 10px, you write:

transform: translate(100px,-10px);

And to move an element right 220px, you write:

transform: translatex(220px);

See some translate examples.

Browser Prefixes for CSS Transformations

CSS transformations are supported in every browser, but in order to get them to work, you need to use browser prefixes. You should always place the browser prefix versions of a property first in your style sheet, with the official property name last. This ensures that when the property moves from draft to final status, that version takes precedence over the prefixed versions.

The table below shows the prefixed versions of the transform property.

CSS Browser Prefixes for Transformations

Browser	CSS3 Prefix/Property
Official Property	transform
Chrome / Safari / Android / iOS	-webkit-transform
Firefox	-moz-transform
Opera	-o-transform
Internet Explorer	-ms-transform