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

【问题标题】：How do I animate flipping an image into another image?如何动画将图像翻转到另一个图像？
【发布时间】：2015-04-19 19:56:21
【问题描述】：

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

flipping-cards-3d-wordpress

我希望它在特定的时间间隔内完成。仅使用css3可以做到吗？

【问题讨论】：

是的，这是可能的。在所有关于 CSS3 翻牌的教程中，哪一个对你来说更容易理解？你试过什么？介意分享一些代码吗？

标签： jquery css jquery-ui

【解决方案1】：

CSS3 提供animate，您可以在此处找到some nice intro，了解如何使用此功能。

这是我的一个示例，它使用两个类 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>

【讨论】：

我想要的是像循环一样发生动画，首先 A 翻转，下一个 B 翻转，下一个 C 翻转，然后 A 再次翻转，B 下一个，依此类推。这可能吗？
@mars 这似乎是另一个问题......是的，这是可能的。你有没有谷歌“如何暂停 CSS3 动画”？
@BinkyNichols 抱歉，这是一个遗留错误。您必须将backface-visibility 设置为visible。 - 固定-