when an html element is translated then rotated it moves diagonally

Question

There is the code :

<body>
  <div class="box"></div>
</body>
<style>
  @keyframes over-and-back {
    0% {
      background-color: hsl(0, 50%, 50%);
    }
    50% {
      transform: rotate(-15deg) translateY(200px);
    }
    100% {
      background-color: hsl(270, 50%, 90%);
      transform: rotate(0) translate(0);
    }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: green;
    animation: over-and-back 3s linear 3;
  }
</style>

I read that this happens because "the rotation takes place after the translation" and indeed when I reverse the order of the transforms it stops moving diagonally. But I would like to understand why.

Are you sure it's moving diagonally and not simply rotating on its original axis? — GillesC, Jul 22 '20 at 09:38

score 2 · Accepted Answer · answered Jul 22 '20 at 09:50

2

It happens because the transforms take place in the order you write them.

It also provides better transform management because you might want to either

translate 200px to bottom and then rotate (in place, so you'll know the element does not go sideways):
```
transform: translateY(200px) rotate(-15deg);
```
rotate and then translate 200px in the direction of the rotation:
```
transform: rotate(-15deg) translateY(200px);
```

You can also imagine rotate rotating the XoY axis.

The translation written ahead of rotate (actually any previous operations) will take place within the normal axis setup.

The translation written after the rotate will take place within the rotated axis setup.

answered Jul 22 '20 at 09:50

Cristian Sarghe

782
6
15

I am reading the book "css in depth" and the author said "You can specify multiple values for the transform property, each separated by a space.Each transform value is applied in succession from right to left." So ``` transform: rotate(-15deg) translateY(200px); ``` isn't it supposed to translate and then rotate ? (right to left) – Imu Sama Jul 22 '20 at 09:56
2

@Roronoa_D._Law that right to left is very confusing, read this to understand the "right to left" or "left to right" https://stackoverflow.com/a/51080643/8620333 – Temani Afif Jul 22 '20 at 09:58

score 1 · Answer 2 · answered Jul 22 '20 at 10:02

1

When you rotate the object along with the specified angle, its entire coordinate system rotates.

PS

Be careful about reading health books. You may die of a misprint.

Mark Twain

answered Jul 22 '20 at 10:02

devfieldnotes

126
1
1
9

"Be careful about reading health books. You may die of a misprint." lmao – Imu Sama Jul 22 '20 at 10:08
1

That was my first guess but the book said the transforms are applied from right to left so I was confused :) – Imu Sama Jul 22 '20 at 10:09
@Roronoa_D._Law Oh, I [see what you mean](https://i.stack.imgur.com/7Aqpw.png) now. I assume Keith just was tired and lost in thought while writing this. The last paragraph makes perfect sense, which brings us back to Mark Twain again. – devfieldnotes Jul 22 '20 at 11:24
@Roronoa_D._Law Anyway, this chapter in Keith's book haunted me, and I contacted him on Twitter. We argued, and he schematically showed me something. If you look at this question of order from a different point of view, then everything that Keith wrote is correct, and I mean absolutely everything. Not a single typo. I was even going to write an article about it (with cool animations and stuff), but as it usually happens, the Internet got ahead of me. https://stackoverflow.com/a/58230528/12260597 – devfieldnotes Aug 08 '20 at 11:32
The answer to your original question is that both ways of thinking are correct, as long as you keep the difference in mind. Now I jokingly call this the «designer's» and «mathematical» point of view. Funnily enough, both camps end up with the same conclusion - rotate and scale functions are best used at the end of the code. I prefer the designer's way of thinking (left to right). – devfieldnotes Aug 08 '20 at 11:33

when an html element is translated then rotated it moves diagonally

2 Answers2