Question

我不明白为什么2D变换中的rotateX和rotateY动画会像demo这样奇怪地移动

谁能解释一下，谢谢

演示代码为

pug 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轴上完成的经典旋转：

const {checkInventory} = require('./library.js');

const order = [['sunglasses', 0], ['bags', 2]];

const handleSuccess = (resolvedValue) => {
    console.log(resolvedValue);
};

const handleFailure = (rejectReason) => {
    console.log(rejectReason);
};

checkInventory(order)=new Promise(resolvedValue, rejectReason){
    if(resolvedValue)
        return handleSuccess;
    else
        return handleFailure;
};

.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;
}

因此，如果我们从等效于Y旋转的另一个方向看，则蓝色部分是我们对Z旋转的感知。而且使用比例转换也具有相同的效果，因为根据我们的理解，这一转换会做相同的事情：

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

.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;
}

二维转换中带有rotateX和rotateY的怪异动画

1 个答案: