If you separate them with a space, you can do multiple transform functions at a time (e.g., a translation and a rotation). The order you put them in is very important, as the next transform function will take the result of the previous transform as its input. This means that if you translate and then rotate, you’ll have moved the element over, and then rotated it. If you rotate and then translate, the element and its X axis will rotate before it will be translated—it will be moved along an angle instead of right or left. This is best seen visually:
Try it Out:
Codepen Demo: https://codepen.io/undeadinstitute/pen/LYEoOxy
HTML Demo: https://undead.institute/files/animation/009-order-of-undead-transformations.html