转换旋转+ 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";