I recently stumbled upon some CSS code using transform css property using 2 translate values inside of the transform. I am not sure exactly how to interpret this:
transform: translate(-50%, -50%) translate(200px, 40px)`,
I had trouble finding any examples on the MDN docs or top hits on google.
Do the transforms override each other, are these like stacking values?
I’ve seen transform property used like this before:
/* Function values */
.some-class {
transform: translate(10px, 10px)
}
.some-class {
transform: translateX(10px)
}
.some-class {
transform: translateY(10px)
}
/* Multiple function values */
.some-class {
transform: translateX(10px) rotate(10deg) translateY(5px);
}
References
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform
- https://www.w3schools.com/cssref/playdemo.php?filename=playcss_transform&preval=translate(20px,10px)
>Solution :
It’s one translation applied after another. In the case of translate(-50%, -50%) translate(200px, 40px), it’s first moving to -50% of the range, then after it reaches that position, it’s offset by an additional 200px, 40px.
You can stack CSS transforms like this. You can also easily test this in the MDN site you linked, by editing the translate example to add another one, and observe the behavior.