Question

好吧，所以我有两个问题，第一个问题是我希望动画在X轴上旋转，但它看起来很奇怪，因为它没有互相旋转，Fiddle

然后我的另一个问题是，当我向变换动画添加scale(1.5)之类的东西时，它似乎忽略了rotation，它只是不再工作了。

HTML

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

CSS

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

Answer 1

.coin元素的高度计算为0，因此transform-origin的位置为scale。如果你让硬币填充其父母，那么它看起来不错。您可以通过将.animate{ animation: rotate 5s; } .coin-wrapper { animation: scale 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); } } @-webkit-keyframes scale { from { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); } } .coin-wrapper { width: 200px; height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); } .coin { position: relative; width: 100%; height: 100%; 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; }应用于包装而不是硬币来解决缩放问题。

＆＃13;

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

＆＃13;

java.io.InputStream

＆＃13;

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

1 个答案: