CSS 2D Transforms

The CSS transform property allows you to translate, rotate, scale, and skew elements. It is one of the most powerful tools for creating interactive and dynamic user interfaces.

Supported 2D Methods

Hover over the boxes below to see the transformations in action:

Transformation Explanations

• translate(x, y): Moves an element from its current position.
• rotate(angle): Rotates an element clockwise by a given degree.
• scale(x, y): Increases or decreases the size of an element.
• skew(x-angle, y-angle): Skews an element along the X and Y axes.
• matrix(): Combines all of the 2D transform methods into one.

The Syntax

.box {
    transform: rotate(20deg);
    transform: scale(1.5);
    transform: translate(20px, 10px);
}