2D Transforms: translate, rotate, scale, skew

What the transform Property Does

transform visually moves, rotates, resizes or skews an element without affecting the layout of surrounding elements - unlike changing width or margin, which pushes neighboring content around.

translate: Moving an Element

.box {
  transform: translate(20px, -10px); /* right 20px, up 10px */
}

Positive values move right/down; negative values move left/up. translateX() and translateY() can also be used individually.

rotate: Turning an Element

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

scale: Resizing an Element

.card:hover {
  transform: scale(1.05); /* 5% larger, both axes */
}
.badge {
  transform: scale(1.2, 0.9); /* different scale per axis */
}

skew: Slanting an Element

.ribbon {
  transform: skew(-10deg, 0deg);
}

Skew shears an element along an axis, commonly used for stylized ribbon or banner shapes.

Combining Several Transforms Together

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

Multiple transform functions can be listed in one declaration, applied in the order written - reordering them can change the visual result, since each transform is applied relative to the coordinate space left by the one before it.