KPC
Kevin Powell - Community•3w ago
soma-foreever

transform: translate vs translate, what's the difference?

It's not very clear from the docs how they're actually different. They both tend to do the same thing afterall. In the following example, the output will be same. 
.container{ 
 translate: -50px;
 /* transform: translate(-50px) */
}
.container{ 
 translate: -50px;
 /* transform: translate(-50px) */
}
Which one should I use and why? Does one have performence advantage over other? Is translate: px; only a shorthand of transform: translate(px)? https://developer.mozilla.org/en-US/docs/Web/CSS/translate#formal_definition https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate edit: support is different. translate: 10px; only started being available after 2022.
11 Replies
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3w ago
It's explained in this video https://www.youtube.com/watch?v=sEBTTw9nwt0
Kevin Powell
YouTube
A new way to do CSS transforms!
Having so many different things all controlled with a single property has it’s downsides, with rotate, scale, and translate all being values we had to use with a transform, but luckily they’ve gone about fixing that recently! 🔗 Links ✅ Browser support: https://caniuse.com/?search=rotate ⌚ Timestamps 00:00 - Introduction 00:26 - we ...
Chris Bolson
Chris Bolson•3w ago
They do exactly the same thing. Kevin probably mentions this in the video but translate isn't a shorthand of transform: translate(). This means that you can actually use both at the same time which is especially useful when animating or transitioning and you have other transform properties defined that don't need to change.
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3w ago
Yupp. translate is not a shorthand property for transform:translate(); it is a standalone property. but transform:skew(); still does not have a standalone property but the other transforms does
ἔρως
ἔρως•3w ago
also, i don't know if the order of the properties has an effect but, in transform, it matters a lot
ἔρως
ἔρως•3w ago
No description
No description
ἔρως
ἔρως•3w ago
the order of scale(0.5) and translate(-100%, -100%) matters https://developer.mozilla.org/en-US/docs/Web/CSS/transform <-- used this to test it
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3w ago
the order for the standalone properties does not matter
ἔρως
ἔρως•3w ago
both give different results then
soma-foreever
soma-foreeverOP•3w ago
ok. thanks everyone!
curiousmissfox
curiousmissfox•3w ago
I have a note about this but didn’t reference the source so I’m not sure where I got this
Transforms get applied in the order they are written eg transform: scale(1) translate(100%) rotate(45deg); is applied differently than transform: translate(100%) rotate(45deg) scale(1); Now with the independent transform properties, the browser applies them in a fixed order (TRS): 
1. first translate
2. then rotate
3. then scale TRS so it’s moved then rotated then scaled. If a transform property is mixed in with them, that gets applied last. Translate Rotate Scale Transform.
ἔρως
ἔρως•3w ago
that is a much more complete version of what i said and demonstrated

Did you find this page helpful?