weird animation with rotateX and rotateY in 2D transform - css

Question

I don't understand why rotateX and rotateY animation in 2D transform will move so weird like demo
who can explain it, thanks
the demo code is
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

It's not werid but logical. You are rotating on the X/Y axis so from our perspective your don't see any rotation but only a size changing.
Here is a classic rotation done the on Z axis:
.b {
width:100px;
height:10px;
background:red;
margin:50px;
animation:change 5s infinite linear;
}
#keyframes change{
to {
transform:rotate(90deg);
}
}
<div class="b">
</div>
Our element is rotating at the center going from 0 to 90deg. Now imagine your are looking to this rotation from the bottom. You will simply see a reduced width.
Here is the different frames:
.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>
Now let's look at this from the bottom:
.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>
So the blue part is our perception of the Z rotation if we look at it from another direction which is equivalent to an Y rotation. And you also have the same effect using a scale transformation since this one will do the same thing from our perception:
.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>
In order to see this differently, you can add some perspective and you will make the rotation more close to what we see in a real world:
.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>