# CSS3 2D Transformation Functions

Blogs

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

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…