# CSS Property: `transform`

Manipulates the size, shape, and position of a box and its contents through rotating, skewing, scaling and translating.

## Possible Values

### 2D Transform Functions

ValueDescriptionExample
`rotate(`[angle]`)`Rotates a box around the point specified by `transform-origin` by the given angle.`rotate(-45deg)`
`skewX(`[angle]`)`Tilts the (horizontal) x-axis by the given angle.`skewX(20deg)`
`skewY(`[angle]`)`Tilts the (vertical) y-axis by the given angle.`skewY(40deg)`
`skew(`[angle]`)`Tilts the (horizontal) x-axis by the given angle. Equivalent to `skewX(`[angle]`)`.`skew(20deg)`
`skew(`[angle]`, `[angle]`)`Tilts the (horizontal) x-axis by the first angle and the (vertical) y-axis by the second angle.`skew(20deg, 40deg)`
`scaleX(`[number]`)`Stretches or contracts horizontal dimensions, multiplying them by the specified number.`scaleX(2)`
`scaleY(`[number]`)`Stretches or contracts vertical dimensions, multiplying them by the specified number.`scaleY(0.5)`
`scale(`[number]`)`Stretches or contracts horizontal and vertical dimensions, multiplying them by the specified number.`scale(2)`
`scale(`[number]`, `[number]`)`Stretches or contracts horizontal dimensions, multiplying them by the first number, and vertical dimensions, multiplying them by the second number.`scale(2, 0.5)`
`translateX(`[length]`)`Shifts a box horizontally by the given length.`translateX(100px)`
`translateY(`[length]`)`Shifts a box vertically by the given length.`translateY(-2em)`
`translate(`[length]`)`Shifts a box horizontally by the given length. Equivalent to `translateX(`[angle]`)`.`translateX(100px)`
`translate(`[length]`, `[length]`)`Shifts a box, horizontally by the first length, and vertically by the second length.`translate(100px, -2em)`
`matrix(`[values]`)`A six-value transformation matrix. Each number value relates to scale (1st and 4th), skew (2nd and 3rd), and translate (5th and 6th), while rotate is implicit and determined from the other values. Values can be determined with the help of matrix conversion tools.`matrix(2.6, -0.2, 1.9, 0.9, 205, -48.7)`

### 3D Transform Functions

ValueDescriptionExample
`rotate3d(`[number]`, `[number]`, `[number]`, `[angle]`)`Rotates a 3D box by the given angle around a direction vector specified by the 1st (x-axis), 2nd (y-axis), and 3rd (z-axis) number values.`rotate3d(1, -1, 1, 45deg)`
`rotateX(`[angle]`)`Equivalent to `rotate3d(1,0,0,`[angle]`)`.`rotateX(45deg)`
`rotateY(`[angle]`)`Equivalent to `rotate3d(0,1,0,`[angle]`)`.`rotateY(50grad)`
`rotateZ(`[angle]`)`Equivalent to `rotate3d(0,0,1,`[angle]`)` and `rotate(`[angle]`)`.`rotateZ(1rad)`
`scale3d(`[number]`, `[number]`, `[number]`)`Stretches or contracts dimensions, multiplying the x-axis by the first number, the y-axis by the second, and the z-axis by the third number.`scale3d(1, 2, 3)`
`scaleZ(`[number]`)`Stretches or contracts dimensions on the z-axis, multiplying them by the specified number. Equivalent to `scale3d(1, 1, `[number]`)`.`scaleZ(3)`
`translate3d(`[length]`, `[length]`, `[length]`)`Shifts a 3D box, on the x-axis by the first length, the y-axis by the second, and the z-axis by the third length.`translate3d(10px, 20px, 30px)`
`translateZ(`[length]`)`Shifts a 3D box on the z-axis by the given length. Equivalent to `translate3d(0, 0, `[length]`)`.`translateZ(30px)`
`matrix3d(`[values]`)`A sixteen-value transformation matrix, combining all of the 3D transform values. Values can be determined with the help of matrix conversion tools.`matrix3d(0.8, 0.3, 0.5, 0, -1, 1.6, 0.6, 0, -0.9, -1.5, 2.4, 0, -40.1, -10.2, 89.9, 1)`
`perspective(`[length]`)`The distance of the z-plane origin from the viewer. The smaller the value the more pronounced the 3D effect.`perspective(500px)`

### Multiple Values

Any number of transform values can be combined by separating them with spaces.

Example: `rotate(-45deg) skew(20deg, 40deg) scale(2)`

Each value will be applied one by one, in reverse order. `scale(2,1) rotate(45deg)` will rotate and then scale, for example. It is not, therefore, the same as `rotate(45deg) scale(2,1)`.

## Example

``````
#puddle {
width: 200px;
height: 200px;
transform: rotate(-10deg);
}
/* A 200px by 200px box, rotated 10 degrees counter-clockwise. */

#pond {
width: 200px;
height: 100px;
transform: translate(20px, -10px) scale(1,2);
}
/* A 200px by 100px box stretched to twice its height (making it 200px and, importantly, doubling the height of the box's contents) then shifted 20px right and 10px up. */
``````

## Browser support

Can I Use transforms2d? Data on support for the transforms2d feature across the major browsers from caniuse.com.

And Can I Use transforms3d? Additional data on support for the transforms3d feature.