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

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