# 2D Transforms

suggest change## Syntax

**Rotate Transform**`transform: rotate(<angle>)`

**Translate Transform**`transform: translate(<length-or-percentage> [, <length-or-percentage>]?)`

`transform: translateX(<length-or-percentage>)`

`transform: translateY(<length-or-percentage>)`

**Skew Transform**`transform: skew(<angle> [, <angle>]?)`

`transform: skewX(<angle>)`

`transform: skewY(<angle>)`

**Scale Transform**`transform: scale(<scale-factor> [, <scale-factor>]?)`

`transform: scaleX(<scale-factor>)`

`transform: scaleY(<scale-factor>)`

**Matrix Transform**`transform: matrix(<number> [, <number> ]{5,5})`

## Parameters

Function/Parameter | Details |
—— | —— |`rotate(x)`

| Defines a transformation that moves the element around a fixed point on the Z axis |`translate(x,y)`

| Moves the position of the element on the X and Y axis |`translateX(x)`

| Moves the position of the element on the X axis |`translateY(y)`

| Moves the position of the element on the Y axis |`scale(x,y)`

| Modifies the size of the element on the X and Y axis |`scaleX(x)`

| Modifies the size of the element on the X axis |`scaleY(y)`

| Modifies the size of the element on the Y axis |`skew(x,y)`

| Shear mapping, or transvection, distorting each point of an element by a certain angle in each direction |`skewX(x)`

| Horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction |`skewY(y)`

| Vertical shear mapping distorting each point of an element by a certain angle in the vertical direction |`matrix()`

| Defines a 2D transformation in the form of a transformation matrix. |
angle | The angle by which the element should be rotated or skewed (depending on the function with which it is used). Angle can be provided in degrees (`deg`

), gradians (`grad`

), radians (`rad`

) or turns (`turn`

). In `skew()`

function, the second angle is optional. If not provided, there will be no (0) skew in Y-axis. |
length-or-percentage | The distance expressed as a length or a percentage by which the element should be translated. In `translate()`

function, the second length-or-percentage is optional. If not provided, then there would be no (0) translation in Y-axis. |
scale-factor | A number which defines how many times the element should be scaled in the specified axis. In `scale()`

function, the second scale-factor is optional. If not provided, the first scale-factor will be applied for Y-axis also. |

## Remarks

## 2D Coordiante system

Transforms are made according to a 2D X/Y coordiante system. The X axis goes from right to left and the Y axis goes downwards as shown in the following image:

So a positive `translateY()`

goes downwards and a positive `translateX()`

goes right.

## Browser support and prefixes

- IE supports this property since IE9 with the
`-ms-`

prefix. Older versions and Edge don’t need the prefix - Firefox supports it since version 3.5 and needs the
`-moz-`

prefix until version 15 - Chrome since version 4 and until version 34 needs the
`-webkit-`

prefix - Safari needs the
`-webkit-`

prefix until version 8 - Opera needs the
`-o-`

prefix for version 11.5 and the`-webkit-`

prefix from version 15 to 22 - Android needs the
`-webkit-`

prefix from version 2.1 to 4.4.4

## Example of prefixed transform:

-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);