Looking for css Keywords? Try Ask4Keywords

# CSS2D Transforms

## 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/ParameterDetails
`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.
angleThe 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-percentageThe 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-factorA 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);
`````` PDF - Download CSS for free