transform lets you translate, scale, rotate, and skew elements, and these changes do not affect the document flow — surrounding elements are not re-laid out just because one element is rotated or scaled. This is the key property that sets it apart from layout properties like width and margin.
2D Transform Functions
Function
Effect
Example
translate()
Translation
translate(20px, -10px)
scale()
Scaling; 1 is the original size
scale(1.1)
rotate()
Rotation
rotate(15deg)
skew()
Skewing
skew(10deg, 0)
Hover to see the effect (if this is a static screenshot, imagine: hovering lifts the card up and scales it up slightly)
transform-origin: The Transformation Reference Point
Every transformation happens around a "reference point", by default the element's center, 50% 50%. Moving the reference point noticeably changes how rotation and scaling look — for example, moving it to the top-left corner makes rotation appear as "swinging around the top-left corner" rather than spinning in place.
.flip-card {
transform-origin: left center;
transform: rotateY(20deg);
}
Combining Multiple Transforms
Multiple transform functions go in the same transform declaration, separated by spaces, and take effect from left to right — swapping the order gives different results, which is one of the most common traps for beginners.
/* translate first, then rotate: the whole element rotates around its new position */.a { transform: translate(40px, 0) rotate(45deg); }
/* rotate first, then translate: the translation direction is rotated too */.b { transform: rotate(45deg) translate(40px, 0); }
Mental modelThink of each transform function as an operation on the "coordinate system itself" rather than on the element: a function executed first redefines the coordinate system for the functions that follow, which is why swapping the order yields different results.
3D Transforms, a First Look
Only when perspective is enabled on the parent element do children show real perspective depth; otherwise rotateX / rotateY just look like flat stretches.
transform-style: preserve-3d keeps a child's 3D transforms in the same three-dimensional space instead of being "flattened" by the parent — the key declaration behind effects like 3D flip cards.
Why transform Is Faster
Changing layout properties like width or top forces the browser to recalculate the page layout (reflow), which is expensive; transform and opacity, on the other hand, can usually be handled directly by the GPU compositor, skipping the layout and paint stages. That is why almost every animation scenario recommends moving elements with transform: translate() instead of left/top.