css - HTML5 旋转动画 - 如何显示 "the other side of the coin"？

Question

考虑this JSFiddle rotation example

HTML:

<div class="container">
  <div class="coin">
    <div class="face heads">
      Hey!
    </div>
    <div class="face tails">
      Ho!
    </div>
  </div>
</div>

CSS:

@keyframes rotation {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

.container {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.coin {
  position: relative;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  animation-name: rotation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 2.5s;
}

.face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.heads {
  background-color: green;
  z-index: 2;
}

.tails {
  background-color: gray;
  z-index: 1;
}

如您所见，众所周知的 .coin 由两个 .face 组成，由两个具有不同 的重叠 div 表示>z-index.

当到达关键帧的 50% 时，动画不应该渲染 .tails 面吗，因为整个 .coin 正在围绕 Y 轴旋转？还是我对 HTML5 的期望太高了？或者我只是做错了什么？

预先感谢您的任何澄清!

Answer 1

我必须做一些研究，并在 David Walsh- CSS Flip 的帮助下

@keyframes rotation {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}
.container {
  background-color: blue;
  width: 100px;
  height: 100px;
  perspective: 1000;
  margin: 1em auto;
}
.coin {
  position: relative;
  top: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  animation-name: rotation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 2.5s;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
}
.face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
}
.heads {
  background-color: green;
  z-index: 2;
  transform: rotateY(0deg);
}
.tails {
  background-color: gray;
  z-index: 1;
  transform: rotateY(180deg);
}

<div class="container">
  <div class="coin">
    <div class="face heads">
      Hey!
    </div>
    <div class="face tails">
      Ho!
    </div>
  </div>
</div>