Summary - Interactive card

Build an interactive hover card with transform.

Chain all transforms

The transform property lets you chain several functions in one declaration. transform: translate(10px, 0) rotate(-5deg) scale(1.05) shifts, then rotates, then scales the element.

Order matters: functions apply left to right. In hover cards this combination makes the interaction feel rich and responsive.

Smooth with transition

transform applies at once; a hover card makes a hard jump. The transition property spreads the change over time. transition: transform 0.3s ease eases the jump across 300 milliseconds.

Now the shift, rotation and scale show as a smooth glide. The interaction feels natural; the eye no longer trips on a hard cut.

Exercise Build an interactive card

Add two style blocks. First a .card selector with two declarations inside: transition: transform 0.3s ease and transform: scale(1). Second a .card:hover selector with transform: scale(1.05) rotate(-2deg) inside. The card should grow and tilt gently on hover.

Show example solution

/* add a transform and a transition for the card */
.card {
  transition: transform 0.3s ease;
  transform: scale(1);
}
.card:hover {
  transform: scale(1.05) rotate(-2deg);
}

Test yourself

Which function rotates the element?
```
/* pick one */
```
- translate(10px)
- scale(2)
- rotate(45deg)
- skewX(10deg)
Show answer

rotate(45deg) — Correct. rotate takes an angle and rotates; here it turns 45 degrees.

Complete the hover effect

.card:hover {
  transform: ____(-5deg);
}

Show answer

.card:hover {
  transform: rotate(-5deg);
}

Next lesson: What are CSS variables?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies