How to Combine Multiple CSS Transforms
How to apply multiple CSS transforms at once, why order matters, and how the individual translate, rotate, and scale properties make it cleaner.
5 min read - Updated 2026-06-18
You can apply several transforms to one element, but a second transform declaration does not add to the first - it replaces it. Here is how to combine them correctly, why order changes the result, and how the newer individual transform properties simplify things.
Chain functions in one declaration
To apply multiple transforms, list them space-separated inside a single transform value. A second transform property on the same selector overrides the first rather than combining.
transform: translateX(20px) rotate(15deg) scale(1.1)
Functions are space-separated, not comma-separated
A separate transform declaration replaces, it does not merge
Group related motion in one value for clarity
Order matters
Transforms apply right to left in terms of coordinate space - each function operates on the space left by the previous one. Swapping rotate and translate gives visibly different results.
translate then rotate orbits differently than rotate then translate
Set transform-origin to control the pivot point
Keep order consistent across states to avoid jumps in transitions
Test transitions, since interpolation depends on matching function lists
Use individual transform properties
Modern CSS adds standalone translate, rotate, and scale properties. They compose automatically and are easier to override or animate independently.
translate: 20px 0; rotate: 15deg; scale: 1.1;
Each can be set and animated independently
They apply in a defined order: translate, rotate, then scale
Mix with the transform shorthand only when you need a specific order
Release checklist
Put multiple transform functions in one space-separated value.
Decide order deliberately - it changes the outcome.
Set transform-origin when rotating or scaling.
Consider individual translate/rotate/scale for independent animation.
Frequently asked questions
How do I apply multiple transforms in CSS?
List the functions space-separated in one transform declaration, e.g. transform: translateX(20px) rotate(15deg) scale(1.1). A second transform property does not add to the first - it overrides it.
Does the order of CSS transforms matter?
Yes. Each function operates in the coordinate space produced by the previous one, so translate-then-rotate differs from rotate-then-translate. Keep the order consistent across states for smooth transitions.
What are the individual transform properties?
Modern CSS exposes translate, rotate, and scale as standalone properties that compose automatically and can be animated independently, applied in the order translate, rotate, then scale.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.