Css变换翻转翻转和IE问题

【问题标题】：Css transform flip flipping back and IE issueCss变换翻转翻转和IE问题
【发布时间】：2014-10-23 23:43:16
【问题描述】：

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

其次，我似乎无法让这个动画在 ie10-11 中工作。卡片只是翻转一个方向并消失。我尝试了一些技巧，但似乎无法弄清楚。

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

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

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

【问题讨论】：

标签： html css

【解决方案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 如何旋转，点击仍然有效。

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

【讨论】：