LESSON 25

Transforms

Learning objective: Move, scale, and rotate elements with transforms.

Understand

Transforms change an element's shape or position visually.

transform can translate (move), scale (resize), and rotate elements without affecting layout flow. Combined with transitions, transforms create tasteful hover effects and motion.

Analogy: A transform is like adjusting a photo: nudge it, zoom it, or tilt it without moving its frame.

See It in Action

A lift-on-hover card:

.card {
  transition: transform 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
}
How it works: On hover, the card moves up 4px and grows slightly, giving a subtle 'lift' effect.

Try It Yourself

  1. Scale a card up slightly on hover.
  2. Translate it up a few pixels.
  3. Rotate an icon on hover.

Quick Quiz

Which transform resizes an element?

Challenge

Add a subtle lift-and-scale hover effect to a card.

Success condition: Your card lifts and scales gently when hovered.