**CSS3 transforms** allow web developers to take just about any element in an HTML document, and rotate, translate, skew, and scale it, all while not changing its effect on the **page layout**. CSS3 provides both 2D and 3D transforms.

However, while 2D transforms are supported in all modern browsers, **3D transforms** are currently **only supported** in Safari, Chrome, and Internet Explorer version 10. In this article, we will take a closer look at **how to use 2D transforms**.

## How do Transforms Work?

At a high level, a transform is an effect that lets an element change its **shape**, **size**, and **position**. We will take a look at some examples to get a better idea of how these transforms work.

## Transform Property

The `transform`

property accepts for its value, **one or more** transform functions. These transform functions specify a transformation. Functions take the **form** of a function name, **with a value** inside of a set of parenthesis.

## Browser Support

At the time of this writing, the `transform`

property is **not supported** by any browser. However, vendor prefixes are currently supported.

Browser | Vendor Prefix |
---|---|

Internet Explorer 9+ | `-ms-transform` |

Firefox | `-moz-transform` |

Opera | `-o-transform` |

Safari | `-webkit-transform` |

Chrome | `-webkit-transform` |

## Syntax

The `transform`

property takes transform functions **as its value**. The default value is `none`

.

`transform: none|transform-functions`

Transform Function | Description |
---|---|

`matrix(n,n,n,n,n,n)` | 2D transformation, using a matrix of six values. |

`rotate(angle)` | 2D rotation, the angle is specified in the parameter. |

`scale(x,y)` | 2D scale transformation, changing the width and height of the element. |

`scaleX(n)` | 2D scale transformation, changing the element’s width. |

`scaleY(n)` | 2D scale transformation, changing the element’s height. |

`skew(x-angle,y-angle)` | 2D skew transformation along the X- and the Y-axis. |

`skewX(angle)` | 2D skew transformation along the X-axis. |

`skewY(angle)` | 2D skew transformation along the Y-axis. |

`translate(x,y)` | 2D translation, moving the element along the X- and the Y-axis. |

`translateX(n)` | 2D translation, moving the element along the X-axis. |

`translateY(n)` | 2D translation, moving the element along the Y-axis. |

## translate() function

With the `translate()`

function, the element **moves from its current position to a new position**, depending on the parameters given for the left (X-axis) and the top (Y-axis) position.

If you only want to translate along the **X-axis**, you can use the `translateX()`

function. If you only want to translate along the **Y-axis**, use the `translateY()`

function.

```
<!DOCTYPE html>
<html>
<head>
<style>
.group {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
padding:10px;
}
.original {
background-color:#EFEFEF;
}
#target {
background-color:#FFAA00;
-ms-transform:translate(100px,100px);
-moz-transform:translate(100px,100px);
-webkit-transform:translate(100px,100px);
-o-transform:translate(100px,100px);
transform:translate(100px,100px);
}
</style>
</head>
<body>
<div class="original group" id="original">Original</div>
<div class="group" id="target">Transform</div>
</body>
</html>
```

## rotate() function

With the `rotate()`

function, we can rotate an element clockwise or counter-clockwise at a given degree. A **positive value** rotates the element clockwise. A **negative value** rotates the element counter-clockwise.

```
#target {
background-color:#FFAA00;
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
```

## scale() function

The `scale()`

function increases or decreases the **size of the target element** depending on the parameters given for the width (X-axis) and the height (Y-axis).

If you only want to scale on the **X-axis**, use the `scaleX()`

function. If you only want to scale the on **Y-axis**, use the `scaleY()`

function. The **numeric value** provided will scale it that number of times.

```
#target {
background-color:#FFAA00;
-ms-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);
}
```

## skew() function

The `skew()`

function **turns an element in a given angle**, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines.

If you only want to skew on the **X-axis**, use the `skewX()`

function. If you only want to skew on the **Y-axis**, use the `skewY()`

function.

```
#target {
background-color:#FFAA00;
-ms-transform:skew(30deg,20deg);
-moz-transform:skew(30deg,20deg);
-webkit-transform:skew(30deg,20deg);
-o-transform:skew(30deg,20deg);
transform:skew(30deg,20deg);
}
```

## matrix() function

While it is unlikely that you will ever need to use the `matrix`

function, underneath all these functions is the **core of CSS transformations**, which is based on the mathematical concept of a transformation matrix.

Each of the functions we have covered so far can be represented by a **matrix value**.

You can visit the W3C site for detailed information about the transformation matrix. In the following example, we will **rotate a div element** 30 degrees, using the `matrix`

function.

```
#target {
background-color:#FFAA00;
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
```

## transform-origin Property

The `transform-origin`

property allows you to **change the position on the transformed element**. An element with a 2D transformed property can change the **X-axis** and **Y-axis** of the element.

In other words, the `transform-origin`

property sets an element’s base placement. **For 3D transforms**, it can change the **Z-axis** as well.

`transform-origin: x-axis y-axis z-axis;`

The **X-axis** and **Y-axis** values can be supplied as `left`

, `center`

, `right`

, `[length]`

, or `[percentage]`

. Here is an example.

```
#target {
background-color:#FFAA00;
-ms-transform: rotate(45deg);
-ms-transform-origin:25px 30px;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:25px 30px;
-moz-transform: rotate(45deg);
-moz-transform-origin:25px 30px;
-o-transform: rotate(45deg);
-o-transform-origin:25px 30px;
transform: rotate(45deg);
transform-origin:25px 30px;
}
```

In this previous example, you can **compare** the element that has only been rotated, **vs** an element that has been rotated and has had the `transform-origin`

property applied.

As you can see, the `transform-origin`

has **changed the position** of the element on its X-axis as well as its Y-axis.