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); }