-ms-transform-origin 不适用于 IE9

Question

我正在使用 transform 和 transform-origin 制作雷达动画。这是下面的 CSS 我有。但它不适用于IE9.

@keyframes ring2 {
    from {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        -webkit-transform-origin:center center 0;
        -moz-transform-origin:center center 0;
        -ms-transform-origin:center center 0;
        transform-origin:center center 0;
  }
  to {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    -webkit-transform-origin:center center 0;
    -moz-transform-origin:center center 0;
    -ms-transform-origin:center center 0;
    transform-origin:center center 0;
 }
}

是否有解决方法可以让它在 IE9 上运行？我虽然如果我使用前缀 -ms 它会起作用

Answer 1

-ms-transform-origin 仅适用于 2D 变换。换句话说，您应该使用 2 个属性，而不是 3 个。

第三个是 Z 向量，transform3D 在 IE9 上不工作。

试试这个，看看它是否有效：

@keyframes ring2 {
    from {
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
        -webkit-transform-origin:center center;
        -moz-transform-origin:center center;
        -ms-transform-origin:center center;
        transform-origin:center center;
  }
  to {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    -webkit-transform-origin:center center;
    -moz-transform-origin:center center;
    -ms-transform-origin:center center;
    transform-origin:center center;
 }
}

Answer 2

规则 @keyframes 是 CSS Animations 模块级别 3 的一部分（CSS3 Animations) 并在 IE 中引入 IE10。所以它在包括 IE9 在内的较低版本中根本不起作用。

-ms-transform-origin 不适用于 IE9

-ms-transform-origin is not working on IE9

css

compass-sass