93. CSS Transforms (2D)

Transforms allow you to move, rotate, scale, and skew an element in two-dimensional space. They are highly efficient because they run on the GPU (Graphics Processing Unit), making them ideal for smooth transitions and animations.

The transform Property

All transformation functions are applied via the transform property.

1. translate() (Moving Position)

Moves the element from its current position without affecting other elements (unlike relative positioning). Takes X and Y values.

css /* Moves the element 50px right and 10px down */ .move-me { transform: translate(50px, 10px); }

/* Common use: centering a modal box (moves element -50% of its own width/height) */ .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

2. scale() (Resizing)

Increases or decreases the size of the element (1 is original size).

css .card:hover { /* Enlarges the card by 10% on hover */ transform: scale(1.1); }

3. rotate() (Spinning)

Rotates the element around its center point (takes angle units like deg).

css .icon-open { transform: rotate(180deg); }

Chaining Transforms: You can combine multiple transformations in a single declaration, separated by spaces.

css .combo { transform: translateX(10px) rotate(45deg) scale(0.9); }