Css转换翻转翻转和IE问题

Question

我正在尝试做css卡翻转效果，我在这里遇到了一些问题。首先 - 我似乎无法获得javascript以使卡片翻转以恢复翻转。我打电话要求点击任一脸，由于某种原因它没有在卡的背面射击。

其次，我似乎无法让这个动画在ie10-11中工作。卡只是单向翻转并消失。我尝试了一些技巧，但似乎无法将其计算出来。

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

最后，当我将内容放在卡片上时，它似乎在移动时闪烁，如果它是前面的图像，当我将其翻转到它的背面（铬合金）时，它似乎仍然显示出来。我尝试添加 -

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

对于闪烁推荐的一些事情，但它似乎并没有完全解决问题。任何帮助都会非常感激，因为我是css动画的新手。感谢您的阅读!!

Answer 1

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

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

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

要：

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

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

这样，您的.flipMe元素永远不会旋转，因此无论.front和.back如何轮换，点击仍然适用。

JSFiddle demo

这似乎也解决了你所描述的IE问题，这是一个奖励！