Html Coinflip动画旋转不正确（以及css动画中的多个变换）

好的，我有两个问题，第一个问题是我想让动画在X轴上旋转，但它看起来很奇怪，因为它没有在彼此内部旋转

然后，我的另一个问题是，当我向变换动画添加类似于

scale（1.5）

的内容时，它似乎忽略了

旋转

，它不再工作了

HTML

<div class="coin-wrapper">
  <div class="animate coin">
    <div class="terrorist"></div>
    <div class="counter-terrorist"></div>
  </div>
</div>

---

.coin

元素的高度被计算为0，因此

变换原点位于0处。如果你让硬币充满它的母体，那么它看起来很好。您可以通过将
scale
应用于包装而不是硬币来解决缩放问题


。制作动画{
动画：旋转5s；
}
1.硬币包装{
动画：缩放5s；
}
@-webkit关键帧旋转{
从{
-webkit变换：rotateY（0）；
-moz变换：rotateY（0）；
变换：rotateY（0）；
}
到{
-webkit变换：rotateX（2160度）；
-moz变换：rotateX（2160度）；
变换：rotateX（2160度）；
}
}
@-webkit关键帧缩放{
从{
-webkit转换：规模（1）；
-moz变换：比例（1）；
变换：比例（1）；
}
到{
-webkit转换：比例（1.5）；
-moz变换：比例（1.5）；
转换：比例（1.5）；
}
}
1.硬币包装{
宽度：200px；
高度：200px；
位置：绝对位置；
顶部：calc（50%-100px）；
左：计算（50%-100px）；
}
.硬币{
位置：相对位置；
宽度：100%；
身高：100%；
变换样式：保留-3d；
}
.硬币.反恐，.硬币.恐怖分子{
位置：绝对位置；
宽度：200px；
高度：200px；
}
.硬币.恐怖分子{
边界半径：50%；
背景图像：url（'https://csgoloto.com/template/img/terrorist.png');
背景尺寸：封面；
}
.硬币.反恐{
变换：旋转（180度）；
边界半径：50%；
背景图像：url（'https://csgoloto.com/template/img/counter-terrorist.png');
背景尺寸：封面；
}


.animate{
  animation: rotate 5s;
}

@-webkit-keyframes rotate {
  from { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    transform: rotateY(0);
  }

  to { 
    -webkit-transform: rotateX(2160deg); 
    -moz-transform: rotateX(2160deg); 
    transform: rotateX(2160deg); 
   }
}

.coin-wrapper {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

.coin {
  position: relative;
  width: 200px;
  transform-style: preserve-3d;
}

.coin .counter-terrorist, .coin .terrorist {
  position: absolute;
  width: 200px;
  height: 200px;
}

.coin .terrorist {
  border-radius: 50%;
  background-image:url('https://csgoloto.com/template/img/terrorist.png');
  background-size:cover;
}

.coin .counter-terrorist {
  transform: rotateY(180deg);
  border-radius: 50%;
  background-image:url('https://csgoloto.com/template/img/counter-terrorist.png');
  background-size:cover;
}