← Home BP · 7-9 🎭

Spotlight Stage

17
🎯 Today's Missions
🎵 🎶 🎷 🎻
🎭
Stage & Music Universe
Spotlight Stage
You're the Stage Director! Cast three transform spells to move your performer: spin, grow, and slide. The show must go on!

✨ Today's Concept: CSS Transforms

CSS transforms are stage directions for your web page. They move things without changing the layout around them — like an actor striking a pose without reshuffling the whole stage!

🔄 rotate — spin around 📏 scale — grow or shrink 🎯 translate — slide anywhere
← Lesson 16: Robot Grid Builder — you arranged robots in a grid. Today, make performers DANCE across it!
Step 1 / 4
Spin the singer! Drag the ROTATE dial to exactly 180° — a half turn.
🎭 The Grand Stage 🎭
💃
🔄rotate(0°)
📏scale(1.0)
🎯translate(0, 0)
🔄 ROTATE Spin the performer
0°
📏 SCALE Grow or shrink
scale: 1.0×
🎯 TRANSLATE Slide across the stage
📜 Your 4 Stage Challenges
0 of 4 challenges complete
🌟
Show's Over — You Did It!
You directed the whole show with three transform spells. Take a bow, director! 🎭

💫 What You Learned

  • rotate(deg) spins an element around its center — 180° is a half turn, 360° is a full spin.
  • scale(n) grows (1.5 = bigger) or shrinks (0.5 = smaller) without touching the layout.
  • translate(x,y) slides an element to a new spot — positive X is right, positive Y is down.
  • Transforms stack — you can rotate AND scale AND translate at the same time!
  • Transforms are visual only — the page around the element stays put. Magic! ✨
🎬 Come Back Tomorrow!
Next up: make your elements MOVE over time with CSS transitions and keyframe animations — the performer will dance on their own!
🏠 Home
Nice move! 🎉