Beginner LevelCSS & Modern Layouts
How do CSS transforms (translate, rotate, scale) work?
❓ Interview Prompt: Explain the transform property, its functions, and why transforms are GPU-accelerated.
The transform property applies geometric transformations without affecting document flow:
•
`translate(x, y)`: Moves element horizontally and vertically.
translateX() and translateY() for single axis.•
`rotate(angle)`: Rotates clockwise.
rotate(45deg), rotate(0.5turn).•
`scale(x, y)`: Resizes element.
scale(1.1) = 110% of original size.•
`skew(x, y)`: Tilts element along axes.
Performance:
Transforms run on the GPU compositor layer rather than the main CPU thread, making them ideal for 60fps animations alongside opacity. Unlike animating width/top/left, transforms don't trigger expensive layout recalculations.
Code Implementation Example
css
.card:hover {
transform: translateY(-4px) scale(1.02);
transition: transform 0.2s ease;
}
/* Center element with transform */
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}💡Hover lift effect and absolute centering with transform.
🎯 Interview Key Takeaway
Transforms are GPU-accelerated and layout-free. Prefer transform over top/left for smooth animations.
#Transform#Animation#GPU#Beginner
Back to all CSS & Modern Layouts Questions→