# CSS3 2D Transforms

## Contents

## 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>;