在 2D 变换中使用 rotateX 和 rotateY 的奇怪动画

Question

我不明白为什么 2D 变换中的 rotateX 和 rotateY 动画会移动得如此奇怪 demo

谁能解释一下，谢谢

演示代码是

哈巴狗html

.ar
.ar2

css

body { background: black;}


@keyframes wing3{
  0%{transform: rotateX(50deg)}
  50%{transform: rotateX(70deg)}
  100%{transform: rotateX(50deg)}
}
@keyframes wing4{
  0%{transform: rotateY(50deg)}
  50%{transform: rotateY(70deg)}
  100%{transform: rotateY(50deg)}
}

.ar {
  width: 40px; height: 5px; background: #fff;
   animation: wing3 1.2s infinite;
}

.ar2 {
  width: 40px; height: 5px; background: #fff;
   animation: wing4 1.2s infinite;
}

Answer 1

这并不奇怪，但合乎逻辑。您在 X/Y 轴上旋转，因此从我们的角度来看，您看不到任何旋转，只是大小发生了变化。

这是在 Z 轴上完成的经典旋转：

.b {
  width:100px;
  height:10px;
  background:red;
  margin:50px;
  animation:change 5s infinite linear;
}
@keyframes change{
  to {
    transform:rotate(90deg);
  }
}

<div class="b">
</div>

我们的元素在中心旋转，从 0 到 90deg。现在想象一下你正在从底部看这个轮换。您只会看到宽度减小。

这是不同的帧：

.b {
  width:100px;
  height:10px;
  display:inline-block;
  background:red;
  margin:50px 10px;;
}

body {
 margin:0;
 font-size:0;
}

<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>

现在让我们从底部看这个：

.b {
  width:100px;
  height:10px;
  display:inline-block;
  background:red;
  margin:50px 5px;
}
.a {
  width:100px;
  height:10px;
  display:inline-block;
  background:blue;
  margin:50px 10px;
}
body {
 margin:0;
 font-size:0;
}

<div class="b">
</div>
<div class="b" style="transform:rotate(40deg)">
</div>
<div class="b" style="transform:rotate(60deg)">
</div>
<div class="b" style="transform:rotate(80deg)">
</div>
<div class="b" style="transform:rotate(90deg)">
</div>
<br>
<div class="a">
</div>
<div class="a" style="transform:rotateY(40deg)">
</div>
<div class="a" style="transform:rotateY(60deg)">
</div>
<div class="a" style="transform:rotateY(80deg)">
</div>
<div class="a" style="transform:rotateY(90deg)">
</div>

所以蓝色部分是我们从另一个方向看Z轴旋转的感知，相当于Y轴旋转。使用比例变换也有同样的效果，因为从我们的感知来看，这个会做同样的事情：

.b {
  width:100px;
  height:10px;
  display:inline-block;
  background:red;
  margin:50px 5px;
  animation:rotate 4s infinite linear;
}
.a {
  width:100px;
  height:10px;
  display:inline-block;
  background:blue;
  margin:50px 10px;
  animation:scale 5s infinite linear;
}

@keyframes rotate{
  to {
    transform:rotateY(90deg);
  }
}
@keyframes scale{
  to {
    transform:scaleX(0);
  }
}

body {
 margin:0;
 font-size:0;
}

<div class="b">
</div>

<br>
<div class="a">
</div>

为了以不同的方式看待这一点，您可以添加一些视角，这样您就可以使旋转更接近我们在现实世界中看到的：

.b {
  width:100px;
  height:10px;
  display:inline-block;
  background:red;
  margin:50px 5px;
  animation:rotate-1 4s infinite linear;
}
.a {
  width:100px;
  height:10px;
  display:inline-block;
  background:blue;
  margin:50px 10px;
  animation:rotate-2 5s infinite linear;
}

@keyframes rotate-1{
  to {
    transform:perspective(45px) rotateY(180deg);
  }
}
@keyframes rotate-2{
  to {
    transform:perspective(45px) rotateX(180deg);
  }
}
body {
 margin:0;
 font-size:0;
}

<div class="b">
</div>

<br>
<div class="a">
</div>

在 2D 变换中使用 rotateX 和 rotateY 的奇怪动画

weird animation with rotateX and rotateY in 2D transform

css

animation

rotation