当 html 元素平移然后旋转时，它沿对角线移动

Question

有代码:

<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>

我读到发生这种情况是因为“旋转发生在平移之后”，实际上当我颠倒变换的顺序时它停止沿对角线移动。但是我想明白为什么。

Answer 1

这是因为转换是按照您编写的顺序进行的。

它还提供更好的转换管理，因为您可能想要

将 200px 平移到底部然后旋转（原地，这样你就会知道元素不会横向移动）：
```
transform: translateY(200px) rotate(-15deg);
```

旋转然后在旋转方向平移200px:

transform: rotate(-15deg) translateY(200px);

你也可以想象rotate旋转XoY轴。

在旋转之前写入的平移（实际上是任何先前的操作）将在正常轴设置中进行。

旋转后写入的翻译将在旋转轴设置内进行。

Answer 2

当您将对象旋转指定的角度时，它的整个坐标系都会旋转。

PS

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

马克吐温

当 html 元素平移然后旋转时，它沿对角线移动

when an html element is translated then rotated it moves diagonally

html

css

animation

transform