如何在IE 10中使这个3D转换工作?

时间:2013-11-21 17:45:56

标签: html css internet-explorer 3d internet-explorer-10

我试图在IE10中进行CSS 3D转换。问题是,IE10不支持preserve-3d属性。

Microsoft CLAIMS有一种解决方法。他们的解决方案是简单地将父元素的变换应用于子元素。但是,这不起作用。

我已经进行了大量的搜索以找到解决方案。有一些可接受的答案据说可以使3D转换工作。问题是......它们真的很简单,就像卡片翻转一样。据我所知,首先不需要保留-3d。

以下是我需要在IE10中完成的工作:

http://codepen.io/Joe_Temp/full/opFKu

有没有人知道如何或者如何实现这一目标?

1 个答案:

答案 0 :(得分:0)

虽然我还没有在IE上测试过,但是在Chrome中使用卡片翻转变换从div中移除transform-style: preserve-3d;属性可以让翻转动作仍然有效,你就不能有背面容器。所以基本上,你可以翻转图像,图像会向后显示 - 但这就是你能做的全部。可能不是你想要的。

如果您愿意接受使用javascript,那么您有更多选项。这个资源讨论了10个不同的js插件,它们都以不同的方式处理翻转操作:

http://www.sitepoint.com/10-jquery-flip-effect-plugins/

我亲自使用过flippy.js,效果非常好。它是为了处理卡片翻转之间的逻辑而构建的,因此需要在卡片翻转之前,中间,完成之后发出大量回调,等等。它也比你现有的无JS解决方案更好地支持。我遇到了。

希望这有帮助。