Rotation, scale, translate, skew

transform

Apply a mathematical transform operation on an element to shift its position, scale it, rotate it, or skew its shape.

2D operations

transform
transform-origin
transform-box
rotate
scale
translate

3D operations

transform-style
perspective
perspective-origin
backface-visibility

transform

Matrix algebra

Apply a matrix algebra operation on an element.

css, style, transform, transform

transform-origin

Transform point of reference

Specify the point of reference for the transform operation.

css, style, transform, transform-origin

transform-box

Precisely tune the transformation origin

Specify whether the transform-origin should account for the padding, borders and margins of the element.

css, style, transform, transform-box

rotate

Rotate about an axis

Apply simplified matrix algebra to rotate an element about the x, y or z axis.

css, style, transform, rotate

scale

Shrink or expand

Apply simplified matrix algebra to scale an element to be smaller or larger.

css, style, transform, scale

translate

Adjust position left, right, up, down

Apply simplified matrix algebra to shift an element left, right, up or down.

css, style, transform, translate

transform-style

Child transformation in 3D space

Specify whether child elements of a 3D transformation are transformed separately or kept in the parent's plane.

css, style, transform, transform-style

perspective

Z axis point of observation

Specify the distance from the user's point of observation to the Z axis when performing a transform.

css, style, transform, perspective

perspective-origin

X/Y point of observation

Specify the user's point of observation in the X/Y plane when performing a transform.

css, style, transform, perspective-origin

backface-visibility

Show/hide back side of transform

Specify whether the back face of a 3D transformation is visible when turned towards the user.

css, style, transform, backface-visibility