2D CSS Transformations

Hover over each box to see the effect in action.

2D Transformations

Translate

Moves the element 20px right and 20px down.

Rotate

Rotates the element 45 degrees clockwise.

Scale

Increases the element's size by 20%.

Skew X

Slants the element along the X-axis.

Skew Y

Slants the element along the Y-axis.

Matrix

Applies multiple transformations in one: skew and translate.