● ● ● sticker.css
CSS
magic stage
LIVE
🏰 Magic Mission Step 1 of 5
…
In Hello Colors you painted with CSS colours. In Button Builder you styled with padding and border-radius. Today you learn the most magical CSS power of all: transforms! These are spells that let you rotate (spin), scale (grow), and translate (slide) ANY element on your page. Tonight you're the Court Wizard of the 🏰 Magic Castle — and you'll design your own enchanted sticker!
rotate(45deg) tilts it halfway. rotate(360deg) does a full spin!scale(2) doubles the size. scale(0.5) shrinks it in half!translateX(80px) pushes it right. Negative slides left!You just mastered CSS transforms — the spells that make every website feel alive! Rotate spins, scale grows, translate slides. Chain them together and ANY element can dance, bounce, and fly. Animations, games, and cool effects ALL start with these three spells!
Your Magic Sticker!
📖 What you learned
transform: rotate(45deg) — spins an element by any angletransform: scale(2) — grows (or shrinks) an elementtransform: translateX(80px) — slides an element sidewaysrotate(90deg) scale(1.5) translateX(50px)👉 Tomorrow: Poster Power — style text like a pro with font-size, font-weight, and text-align. Make a castle proclamation! 📜
← Back to Lessons