HTML Dog
Skip to navigation

CSS Property: transform

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

The four basic 2D transform functions — rotate, skew, scale, and translate.

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)

Keywords

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.