CSS3 2D Transforms

Introduction

CSS3 allows us to manipulate objects in 2D space by the use of the tranform property and its functions for 2D transformations.

Transform Functions

The tranform property specifies certain transformations to be applied to an element. It can combine several transform functions by separating them with whitespace, for example:

transform: scale(2) rotate(180deg) translateX(15px);

Translate

The translate function moves the element by an offset defined with two values, if only one value is defined, the second one is taken to be zero. Here is a basic example:

transform: translate(30px, 20%);

If an object needs to be translated only on one axis the functions translateX and translateY can be used, they can represent the example above like this:

transform: translateX(30px) translateY(20%);

Which would create an identical result.

Scale

The scale function resizes the entire element when using one or two unitless numbers, where scale(1) is no change, scale(0.5) is half the lenght and width, and scale(2) is twice the lenght and width. If two numbers are provided the first defines how much the element will be stretched/collapsed horizontally, and the second - vertically. The following example:

transform: scale(3, 0.5);

Will stretch the object to three times its original width and will make it half as wide. This would be the same as declaring:

transform: scaleX(3) scaleY(0.5);

Skew

The skew function tilts the element by using one or two angle values. If skewX(45deg) is defined the top and bottom edges of the element will remain horizontal, but the left and right edges will be "leaning" to the left by 45 degrees. If skewY(30deg) is defined then the left and right edges of the element will remain vertical, but the top and bottom edges will be tilted to the right by 30 degrees.

Rotate

The rotate function rotates the element clockwise by an angle defined with a single value, for example:

transform: rotate(45deg);

Will rotate the entire element by 45 degrees clockwise.

Transform Origin

The transform-origin property sets the origin of a transformation (rotation, scale, etc.) of an object in a simple coordinate system. The default origin of each object is its geometric center.

Setting two values for transform-origin defines the horizontal and vertical position.

transform-origin: <percentage> or <length> or left/center/right , <percentage> or <length> or top/center/bottom ;

If only one value is specified it refers to the horizontal position, the vertical position in this case is assumed to be 'center'. The <percentage> and <length> values here are the offset of the transform origin from the top left corner of the element.

The transform-origin property can also receive more than two values:

transform-origin: bottom 25px right 40%

In such cases, the second and the fourth values determines the offset from the edge defined by the keyword preceding it. The transform origin for the example above is 25px from the bottom and 40% from the right edge of the element.

If only three values are given, the fourth missing value - the vertical offset - is assumed to be zero.

Summary

The scale, skew, and translate functions can be used to declare its horizontal and vertical values both together or separately by using scaleX, scaleY, skewX, skewY, translateX, and translateY. The function rotate can have only one value.

Browser Support

CSS transforms are currently supported with prefixes by these browsers:

Chrome 10+

Firefox 3.6+

Internet Explorer 9+

Opera 11+

Safari 5+

When declaring transforms always write the prefixed declarations first and the non-prefixed standard declaration at the end:

-webkit-transform: <transform functions>;
-moz-transform: <transform functions>;
-ms-transform: <transform functions>;
-o-transform: <transform functions>;
transform: <transform functions>;