html - Css transform flip 向后翻转和 IE 问题

Question

我正在尝试制作 css 卡片翻转效果，但遇到了一些问题。首先 - 我似乎无法获得 javascript 来让卡片翻转以恢复翻转。我需要点击任一面，但由于某种原因它没有在卡片的背面触发。

其次，我似乎无法让这个动画在 ie10-11 中运行。卡片简单地翻转一个方向然后消失。我尝试了一些技巧，但似乎无法弄清楚。

这是我正在做的事情 - http://jsfiddle.net/4j9fv61L/5/

最后，当我将内容放在卡上时，它似乎在移动时会闪烁，如果它是正面的图像，当我将它翻转到背面时(chrome)，它似乎仍然显示。我尝试添加 -

-webkit-backface-visibility: hidden
backface-visibility: hidden

建议针对闪烁问题采取一些措施，但似乎并没有完全解决问题。任何帮助将不胜感激，因为我是 CSS 动画的新手。感谢阅读!!

Answer 1

问题是您无法点击 .flipMe 元素，因为它面向另一个方向。您可以通过不转换该元素，而是转换 .front 和 .back 元素来解决这个问题。

首先，从 .flipMe 中删除 transition 并将其添加到您的 .front 和 .back 元素.然后改变:

.flipMe {
    transform: rotateY(180deg);
}

收件人:

.flipMe .front {
    transform: rotateY(180deg);
}

.flipMe .back {
    transform: rotateY(0deg);
}

有了这个你的 .flipMe 元素永远不会旋转，因此无论 .front 和 .back 如何旋转，点击仍然适用.

JSFiddle demo .

这似乎也解决了您描述的 IE 问题，这是一个奖励!