CSS：硬幣旋轉效果

利用 transform 的 rotateY 進行垂直方向旋轉。

<div class="coin"></div>

.coin {
  width: 100px;
  height: 100px;
  margin: 100px;
  animation: rotate 5s linear;
  background-color: goldenrod;
  border-radius: 50%;
}

.coin:hover {
  animation-play-state: paused;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

效果圖：

實現旋轉硬幣正反不同圖片效果： https://blog.csdn.net/qq_39974331/article/details/91875243