CSS Transform Summary

CSS transforms visually move, scale, rotate, or skew an element without changing the normal layout around it.

.card:hover {
	transform: translateY(-4px);
}

Transforms are often used for small interface effects, such as lifting a card on hover or rotating an icon.

Translate Moves An Element Visually

translate moves an element from where it would normally appear.

.badge {
	transform: translate(10px, -10px);
}

The first value moves left or right. The second value moves up or down.

scale makes an element appear larger or smaller.

.button:hover {
	transform: scale(1.05);
}

The element appears slightly larger, but its original layout space does not grow.

rotate turns an element around its center by default.

.arrow {
	transform: rotate(90deg);
}

A transform changes instantly unless CSS also adds a transition.

.card {
	transition: transform 200ms ease;
}

.card:hover {
	transform: translateY(-4px);
}

The Transition lesson explains how to animate changes between property values.