What is the CSS transform property?
Answer
The CSS transform property applies 2D or 3D transformations to an element without affecting document flow — other elements do not reflow around the transformed element. Common functions: translate(x, y) moves the element (GPU-accelerated when combined with will-change). scale(x, y) resizes. rotate(angle) rotates. skew(x, y) slants. matrix() applies a full transformation matrix. Multiple functions chain: transform: translateX(50px) rotate(45deg) scale(1.2). A key benefit for animation: transforms and opacity are the only CSS properties that browsers can animate on the GPU compositor thread, avoiding main-thread layout recalculations and enabling smooth 60fps animations.
Previous
What is the CSS object-fit property?
Next
What are HTML meta tags and what are they used for?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What are CSS custom properties (CSS variables)?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?