CSS 2D Transform

CSS 2D Transform allows you to modify an element's appearance on a two-dimensional plane (X and Y axes).

With 2D transforms, you can:

• Move elements horizontally or vertically
• Rotate elements
• Resize elements
• Skew elements

Unlike normal positioning methods, transforms change the visual appearance of an element without affecting surrounding elements. The supporting concepts are explained in CSS Transform and CSS Transitions.

2D transforms are commonly used for:

• Hover effects
• Buttons
• Cards
• Image galleries
• Interactive UI components

Syntax

selector {
    transform: function(value);
}