css-challenges

← overzicht

CSS challenge 2: Transform & Transition

🗓️ ⸺ Dinsdag 17 september
⏰ ⸺ 9:30 - ca 11:30 uur

📗 ⸺ Transform & Transition intro (pdf 4MB)
🧑‍💻 ⸺ Transform & Transition sample (CodePen)

Oefening 1: 🤝 Meet the properties

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Transform & Transition oefening 1 (pdf)

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

niet meteen spieken 🫣

Oefening 2: 🧊 3D transforms

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Transform & Transition oefening 2 (pdf)

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

niet meteen spieken 🫣

🎯 ⸺ translate (MDN 🦊)
🎯 ⸺ rotate (MDN 🦊)
🎯 ⸺ scale (MDN 🦊)
🎯 ⸺ transform (MDN 🦊)
🎯 ⸺ transform-origin (MDN 🦊)

🎯 ⸺ transition (MDN 🦊)
🎯 ⸺ transition-duration (MDN 🦊)
🎯 ⸺ transition-delay (MDN 🦊)
🎯 ⸺ transition-property (MDN 🦊)
🎯 ⸺ transition-timing-function (MDN 🦊)
🎯 ⸺ ceaser (css custom easing) (www 👑)

🎯 ⸺ perspective (MDN 🦊)
🎯 ⸺ backface-visibility (MDN 🦊)

🎯 ⸺ filter (MDN 🦊)
🎯 ⸺ overflow (MDN 🦊)
🎯 ⸺ prefers-reduced-motion (MDN 🦊)
🎯 ⸺ pointer-events (MDN 🦊)

🎯 ⸺ long read - individual transform properties (web.dev 🦖)

This site is open source. Improve this page.