1

我有一个 div,当它淡入时我正在旋转。它适用于每个现代浏览器,但 IE 的代码似乎不起作用。

#box
{
    width: 400px;
    height: 400px;
    display: inline-block;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition: all 0.8s 1s ease-in-out;
    -webkit-transition: all 0.8s 1s ease-in-out;
    -moz-transition: all 0.8s 1s ease-in-out;
    -o-transition: all 0.8s 1s ease-in-out;
    opacity:0;
}

#box.animate
{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    opacity:100;
}

我看过以下两个类似的问题,但他们的解决方案并没有解决我的问题。

css3 旋转在 IE9 中不起作用

CSS3 变换:旋转;在 IE9 中

我愿意使用 jQuery,但我对它的了解还不够,无法自己编写代码。

更新

下面是我询问的关于如何使用 jQuery 解决的一个新问题的链接。如果你能帮上忙,我会给你做蛋糕。或者一个馅饼。

使用 IE9 支持的 jQuery 旋转 div

4

3 回答 3

4

IE9 不支持转场,因此,它不会使用转场样式制作动画。

http://caniuse.com/#search=transition

您必须使用 javascript 或 javascript 库(jQuery 等)才能在 IE 9 中实现这一点。所以要回答您最初的问题,答案是否定的,它不应该在 IE 9 中工作。您可能需要改写和然而,发布一个关于如何在 jquery 中进行图像旋转的新问题。

于 2013-07-26T19:20:38.467 回答
0

不幸的是,IE9 和更早版本不支持 CSS 属性

transition:

要创建您的交易效果,您应该使用 jQuery、Mootools 或其他类似的 javascript 库。我知道这不是解决方案,而只是提示。

于 2013-07-26T19:24:08.753 回答
-1

页面上的内容类型是什么?如果您没有定义内容类型,我相信 IE9 会进入“怪癖模式”。为了在 IE 中获得最佳性能,您应该将内容类型设置为以下内容:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

于 2013-07-26T19:16:29.340 回答