Uploaded July 2022 | Updated September 2026, 31 minutes ago

---

Learn how individual transform properties in CSS work (translate, scale, and rotate) and how they enable you to create complex CSS transition effects.

🌈 Demo: codepen.io/ZoranJambor/pen/gOepEMq

📚 Resources
Translate: developer.mozilla.org/en-US/docs/Web/CSS/translate
Rotate: developer.mozilla.org/en-US/docs/Web/CSS/rotate
Scale: developer.mozilla.org/en-US/docs/Web/CSS/scale
Rotate 3d: developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
Scale 3d: developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

📖 Chapters
00:00 Intro
00:39 How CSS Transform property works
01:49 How to transition Transform property
02:18 How to animate Transform functions (translate, scale, rotate) separately
02:54 How individual CSS Transform properties work
03:59 How to animate individual Transform properties
05:46 How CSS Translate property works in detail
06:42 How CSS Rotate property works in detail
07:29 How CSS Scale property works in detail
08:09 Browser support & feature detection for individual CSS Transform properties
09:03 How to create an interesting animated hover effect using individual CSS Transform properties
11:06 A note about accessibility when working with hover effects (focus styles)
11:39 Conclusion
#css

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor