CSS3 2D Transformation Functions

This entry is part 2 of 5 in the series CSS3 Transformations

CSS3 Transformations

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…

CSS3 Transformations

<< CSS3 Transformations 101: What are Transformations?CSS3 3D Transformations >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    There is to huge differences between transform & CSS values (cf your translate statement).

    The big big first difference is that transform changes how the browser renders the element, which is very different from setting layout by CSS. Transform doesn’t affect how nodes “floats” between each others. The representation of the elements moves, but its zone doesn’t change (resulting of a empty zone if you translate it too far).

    The second huge difference is that since it only affects how the browser renders this particular element zone of the document, most browsers transfer this job to the GPU. Which means hardware acceleration. The impact is huge on performance, specially on mobile devices. See this as moving/rotating/scaling/skewing the element zone set of pixels. Which is also why you can scale it (something you can’t do in JS).

    Hope this clarify
    Example:
    if you reduce an element width, all elements it contains has to be recalculated & redrawn. A smaller paragraph means lines doesn’t break on the same words, images might be smaller so its height might change too, …
    This does not apply to transformations, since it “only” transforms the corresponding pixels of this element zone (which is also why scaling more than 1 or -1 looks blurry, it’s basically the same as using a 100x100px jpg image and make it 250x100px).

    Hope this clarify a bit the differences, and why transform is very nice, but also sometimes not what you want to use (aka if you need to expand the element size itself, not its representation)