CSS transform and individual transform properties (translate, rotate, scale) are additive rather than overwriting each other. When both are set on an element, all values combine to determine the final transformation. The order of application is: translate → rotate → scale → transform functions (left to right). This behavior is defined in the CSS Transforms Level 2 specification. Individual transform properties are useful for updating a single transformation (e.g., on hover) without losing others set via the shorthand transform property.
Table of contents
CSS properties overwrite each otherThe CSS transform propertyIndividual transform propertiesAdditive transformsVideo by FrontendFYI1 Impression