Css HTML5旋转动画-如何显示；硬币的另一面；？

考虑到

HTML:

如您所见，众所周知的

.coin

由两个

面组成，由两个重叠的
div
s以不同的
z-index
表示

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

提前感谢您的任何澄清
 我不得不做一些研究，在


@关键帧旋转{
0% {
变换：旋转3d（0,1,0,0度）；
}
50% {
变换：旋转3d（0,1,0,180度）；
}
100% {
变换：旋转3d（0,1,0,360度）；
}
}
.集装箱{
背景颜色：蓝色；
宽度：100px；
高度：100px；
前景：1 000；
保证金：1em自动；
}
.硬币{
位置：相对位置；
顶部：25px；
左：25px；
宽度：50px；
高度：50px；
文本对齐：居中；
线高：50px；
动画名称：旋转；
动画迭代次数：无限；
动画计时功能：线性；
动画持续时间：2.5s；
变换：旋转（0度）；
变换样式：保留-3d；
}
.脸{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界半径：50%；
背面可见性：隐藏；
}
.头{
背景颜色：绿色；
z指数：2；
变换：旋转（0度）；
}
.尾巴{
背景颜色：灰色；
z指数：1；
变换：旋转（180度）；
}

嘿
呵！
我不得不做一些研究，在


@关键帧旋转{
0% {
变换：旋转3d（0,1,0,0度）；
}
50% {
变换：旋转3d（0,1,0,180度）；
}
100% {
变换：旋转3d（0,1,0,360度）；
}
}
.集装箱{
背景颜色：蓝色；
宽度：100px；
高度：100px；
前景：1 000；
保证金：1em自动；
}
.硬币{
位置：相对位置；
顶部：25px；
左：25px；
宽度：50px；
高度：50px；
文本对齐：居中；
线高：50px；
动画名称：旋转；
动画迭代次数：无限；
动画计时功能：线性；
动画持续时间：2.5s；
变换：旋转（0度）；
变换样式：保留-3d；
}
.脸{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界半径：50%；
背面可见性：隐藏；
}
.头{
背景颜色：绿色；
z指数：2；
变换：旋转（0度）；
}
.尾巴{
背景颜色：灰色；
z指数：1；
变换：旋转（180度）；
}

嘿
呵！
@Paulie\u说得好，谢谢。我编辑了这个问题。@Paulie\u说得好，谢谢。我编辑了这个问题。是的。这些就是我要找的房产。非常感谢。：）有没有一种方法可以得到同样的效果，但实际上是使用图像？我遵循了相同的教程，但是如果我用图像替换文本，我不会得到效果，只显示一面是的。这些就是我要找的房产。非常感谢。：）有没有一种方法可以得到同样的效果，但实际上是使用图像？我遵循了相同的教程，但是如果我用图像替换文本，我不会得到效果，只会显示一面
<div class="container">
  <div class="coin">
    <div class="face heads">
      Hey!
    </div>
    <div class="face tails">
      Ho!
    </div>
  </div>
</div>

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