javascript - 变换旋转问题+IE9/10

Question

希望有人能引导我朝着正确的方向前进，因为我已经尝试完成这项任务几个小时，但似乎无法提出 CSS / Javascript 的跨浏览器组合。

基本上，我想做的是使用 CSS 和 Javascript 进行“卡片翻转”。该代码在 Google Chrome 中运行良好，但我似乎无法让它在 IE9/10 中运行。这是一个示例jsFiddle。

在IE10中查看同一个jsfiddle时，只看到卡片的背面，动画不起作用。

有什么建议么？

Ignore this - need a code snippet to post the above jsFiddle link.

Answer 1

jsFiddle示例仅适用于 Chrome（更准确地说，是 webkit 浏览器）。这是很合乎逻辑的，因为这里只使用了 css -webkit 属性。

您要使用的 Card Flip 动画也应该适用于 IE10（而且您的问题中甚至没有提到 Firefox）

查看W3school 页面，了解有关您需要使用的 3D 变换 CSS 属性的更多详细信息。

现在的问题：IE9。

1. IE9 不提供 CSS 动画。您必须使用 Javascript (jquery animate) 的后备。
2. IE9 不提供旋转的可能性。但是，它提供了flipX。是的，你不会有 3D 效果，但你仍然会有翻转效果。

IE9 的翻转属性是

filter: FlipH;
-ms-filter: "FlipH";