CSS Transforms

CSS transforms do not cause layout shifts. They don't affect the document flow, so the browser doesn't have to re-calculate the surrounding layout.

Note that transforming content can push things outside a container which causes a scrollbar, which in turn causes a layout shift.

Note that CSS transforms can be done through the transform property or individual shorthand properties such as scale. They are mostly the same, with the following caveats:

• Individual properties allow more control as they can be used individually with [[20251205090111-css-transitions-animations]]
• The order of transformation functions in transform is respected. With individual properties, it's a pre-defined order: translate, rotate, scale.

https://www.stefanjudis.com/blog/order-in-css-transformation-transform-functions-vs-individual-transforms/

Remember that transforms make a [[20210202094044-css-stacking-contexts]]

[[animations]] [[browsers]] [[css]]