CSS 3D旋转,在不同的浏览器中摆弄

时间:2014-01-29 14:23:29

标签: javascript jquery css3

我有一个相当大的小提琴。 http://jsfiddle.net/pz5VJ/3/

它有一个调用窗口大小来调整不同内容的函数。这适用于所有浏览器。

function dim()

它还有一个旋转横幅的功能。

function dauerrotieren()

您可以设置横幅数量,然后将它们放入下一个位置。我有6个可能的图像,因此您可以将 var anzahl_an_bannern 设置为1到6之间的数量。

整个过程在Opera和Chrome中运行良好。在IE中它不起作用。我认为CSS存在问题。

Firefox:基本上可行,但旋转回0degree(第42行)进入运动而不是0ms。我希望它暗示一个连续的旋转,而不是4x90和一次-360。

我不能只将它增加90度到无穷大,因为如果你最小化浏览器并在一段时间之后重新开启它会尽快恢复所有那些错过旋转以恢复到当前程度(3780或那时的任何地方)。

很抱歉这篇冗长的帖子。如果它在代码中包含太多令人困惑的德语注释,我可以将其清理干净,以便更好地阅读,或者将其替换为英语。虽然很快就预约了,所以我明天就要这么做了。

1 个答案:

答案 0 :(得分:0)

在IE中,保留-3D还不起作用,所以你得到平面而不是3D效果。 这是MSDN的原始文本:

“注意W3C规范为此属性定义了preserve-3d的关键字值,表示不执行展平。此时,Internet Explorer 10不支持preserve-3d关键字。您可以通过以下方法解决此问题:除了子元素的正常变换之外,手动将父元素的变换应用于每个子元素。“

参考:http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx