CSS 2D Transforms - Detailed Overview

Introduction to 2D Transforms

2D transforms in CSS allow you to manipulate elements in two-dimensional space. The main 2D transform functions include:

• rotate(): Rotates an element around a fixed point.
• scale(): Scales an element up or down.
• translate(): Moves an element from its current position.
• skew(): Skews an element along the X and Y axes.

Rotate

The rotate() function rotates an element by a specified angle. Here is an example:

.rotate { transform: rotate(45deg); }

Scale

The scale() function scales an element up or down. The default scale factor is 1, so a factor greater than 1 will enlarge the element, and a factor less than 1 will shrink it. Here is an example:

.scale { transform: scale(1.5); }

Translate

The translate() function moves an element from its current position. You can specify movement in the X and Y directions. Here is an example:

.translate { transform: translateX(50px); }

Skew

The skew() function tilts an element along the X and Y axes. Here is an example:

.skew { transform: skew(20deg, 10deg); }