如何动画翻转图像到另一个图像？

Question

如何翻转如下链接中的图像？

翻转卡片-3d-wordpress

我希望它在特定的时间间隔内完成。是否可以仅使用 css3 来做到这一点？

Answer 1

CSS3 提供animate，您可以在此处找到有关如何使用此功能的一些不错的介绍。

这是我的一个示例，它使用两个类flipH和flipV，应用于父元素的 将知道如何处理子card元素。
彻底查看 CSS 以正确设置您的背面并获得有关悬停（如果需要）过渡的使用的线索，但主要是 - 交替动画：

/* ::: HOLDER, CARD, FACES */
.holder {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.card, .front, .back{
  position:   absolute;
  height:     inherit;
  width:      inherit;
  transition: all .7s;
  transform-style:     preserve-3d;
  backface-visibility: visible;
}

/* ::: FACES */
.front{background: tomato;}
.back{background:  slategray;}

/* ::: SETUP FACES */
.flipH .back{transform: rotateY(-180deg);}
.flipV .back{transform: rotateX(180deg);}

/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.flipH:hover .card{ transform: rotateY(180deg); }
.flipV:hover .card{ transform: rotateX(-180deg); }

/* ::: AUTOMATED EFFECTS */
.flipH .card{
  animation: flipH 2s 0s infinite alternate ease-in-out;
}
.flipV .card{
  animation: flipV 2s 0s infinite alternate ease-in-out;
}
@keyframes flipH {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@-webkit-keyframes flipH {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes flipV {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}
@-webkit-keyframes flipV {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

<div class="holder flipH">
  <div class="card">
    <div class="front">A</div>
    <div class="back">B</div>
  </div>
</div>

<div class="holder flipV">
  <div class="card">
    <div class="front">A</div>
    <div class="back">B</div>
  </div>
</div>

<div class="holder flipH">
  <div class="card">
    <div class="front"><img src="//i.stack.imgur.com/1ZIkv.jpg?s=64&g=1"></div>
    <div class="back"><img src="//i.stack.imgur.com/776st.jpg?s=64&g=1"></div>
  </div>
</div>