变换旋转问题+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 属性。

您要使用的卡片翻转动画也应该适用于 IE10（甚至您的问题中没有提到的 Firefox）

查看您需要使用的W3school page for more details on the 3D Transforms CSS properties。

现在的问题：IE9。

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

IE9的翻转属性是

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