Intermediate LevelCSS & Modern Layouts
What are individual CSS transform properties (translate, rotate, scale)?
❓ Interview Prompt: Explain individual transform properties versus the combined transform shorthand and animation benefits.
Modern CSS (2022+) supports individual transform properties as standalone declarations:
•
translate: 10px 20px instead of transform: translate(10px, 20px)•
rotate: 45deg instead of transform: rotate(45deg)•
scale: 1.5 instead of transform: scale(1.5)Key Benefit:
With the combined transform property, animating one function (like translate) required redeclaring ALL other functions. Individual properties can be transitioned independently:
transition: translate 0.3s ease, rotate 0.2s ease;
Code Implementation Example
css
/* ❌ Old: must redeclare entire transform */
.card { transform: translateY(0) rotate(0) scale(1); }
.card:hover { transform: translateY(-4px) rotate(2deg) scale(1.02); }
/* ✅ New: independent properties */
.card {
translate: 0 0;
rotate: 0deg;
scale: 1;
transition: translate 0.3s ease, scale 0.2s ease;
}
.card:hover {
translate: 0 -4px;
scale: 1.02;
}💡Individual transform properties vs combined transform shorthand.
🎯 Interview Key Takeaway
Individual transform properties allow independent animation timing for translate, rotate, and scale.
#Transform#Individual#Animation#Intermediate
Back to all CSS & Modern Layouts Questions→