CSS3 2D Transformation Functions

In my previous article we discovered that transformations are applied using the transform property (with a -webkit prefix for Chrome, Safari and Opera 15):

-webkit-transform: function(values);
transform: function(values);

In this article we’ll discuss all 2D functions.

translate, translateX and translateY

The translate function moves an element relative to its current location. It accepts an x and y value which can be any typical CSS length (px, em, %, etc):

transform: translate(-200%, 100px);

View the translate transformation demonstration page…

In this example, the element is moved 200% to the left and 100px down. The percentage is based on the original size of the box so 200% represents twice its width.

If you only wanted to move in a single direction, you can use translateX or translateY accordingly.

Now you’re probably thinking this property is pointless — after all, we could move elements in CSS2.1 using margins or absolute positioning values. However, it can come in useful. For example, assume you had an element centered using margin: 0 auto;. Moving that element 20px to the left would be tricky unless you knew the exact dimensions of the container — but translate makes it easy.

scale, scaleX and scaleY

scale affects the dimensions of the element and all its children. It can be passed a single parameter which represents the scaling in both directions, e.g. make the element twice as large:

transform: scale(2);

Or we can pass two parameters which scale the element horizontally and vertically, e.g. make the element half the width but twice the height:

transform: scale(0.5, 2);

Alternatively, you can use scaleX or scaleY to target one dimension.

What’s less well known is that either dimension can accept a negative value which creates a mirror image of the element. For example, a horizontal reflection which is 150% taller:

transform: scale(-1, 1.5);

View the scale transformation demonstration page…

rotate

As you’d expect, rotate rotates an element using an angle specified in degrees (deg) or radians (rad), e.g.

transform: rotate(30deg);

View the rotate transformation demonstration page…

A positive value rotates clockwise while a negative value rotates counter-clockwise. The item rotates around its center although you can change the behavior using the transform-origin property (and -webkit-transform-origin) with keywords (left, right, top, bottom, center), percentages or length units, e.g.

/* rotate around top-left of element */
transform-origin: left top;

skewX and skewY

skewX and skewY can be used to skew against the horizontal and vertical axis accordingly by passing an angle in degrees (deg) or radians (rad). (Note the single skew function which accepted both parameters has been dropped from the specification and shouldn’t be used).

transform: skewX(-10deg);

View the skewX transformation demonstration page…

Multiple Transformations

Multiple transformation functions can be passed to the transform property if they are separated by whitespace characters, e.g.

transform: rotate(-20deg) skewX(-10deg) scale(0.8);

View the multiple transformations demonstration page…

If you’re a hardcore mathematician, you can also apply transformations using the matrix function. This accepts six parameters; four for the transformation matrix followed by two for the dimension scaling, e.g.

transform: matrix(1.2,0.2,0.15,1,-50,10);

The matrix is applied to every point to determine the new shape and location. Unless you’re manipulating the values using JavaScript, I suggest using multiple values; they’re far easier to read.

Disabling Transformations

Finally, if you want to switch off all the transformations applied to an element, simply use a none function with no parameters:

transform: none;

Working with transformations in two dimensions is easy. In the next lesson, we’ll move into 3D…