Question

我正在做一个雷达动画转换和变换原点。这是我拥有的以下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.

第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

at-rule @keyframes是CSS 动画模块级别3（ CSS3动画）的一部分，并在IE中引入 IE10 。所以它在包括IE9在内的较小版本中根本不起作用。

-ms-transform-origin不适用于IE9

2 个答案: