Question

这是我用来旋转图片的代码：

 <style>
      #logo1{ position: absolute;
      -moz-animation: 3s rotate infinite linear  ;
      -moz-transform-origin: 50% 50%; 
      -webkit-animation: 3s rotate infinite linear  ;
      -webkit-transform-origin:50% 50%;  
      }

    @-moz-keyframes rotate {
        0    { -moz-transform: rotate(0); } 
        100% { -moz-transform: rotate(360deg); }  
        }

    @-webkit-keyframes rotate {
        0%    { -webkit-transform: rotate(0); }
        100% { -webkit-transform: rotate(360deg); } 
    }
    </style>

此代码适用于firefox，safari和chrome。但它不适用于Internet Explorer。我需要做些什么改变请帮助......

Answer 1

 <style>
    #logo1{ position: absolute;
       animation:3s rotate infinite linear  ;/* IE 10 */
       transform-origin:50% 50%;/* IE 10 */
       -moz-animation: 3s rotate infinite linear  ;
       -moz-transform-origin: 50% 50%; 
       -webkit-animation: 3s rotate infinite linear  ;
       -webkit-transform-origin:50% 50%;  
      }

    @-moz-keyframes rotate {
        0    { -moz-transform: rotate(0); } 
        100% { -moz-transform: rotate(360deg); }  
        }

    @-webkit-keyframes rotate {
        0%    { -webkit-transform: rotate(0); }
        100% { -webkit-transform: rotate(360deg); } 
    }

    @keyframes rotate{
      0    { transform: rotate(0);} /* IE 10 */
      100% { transform: rotate(360deg);} /* IE 10 */
    }

 </style>

jsfiddle demo

Answer 2

您可以将transform用于IE 10/11，将-ms-transform用于IE 9。

更多兼容性信息：http://caniuse.com/#search=transform

Answer 3

如果您需要支持旧IE，请添加：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Internet Explorer的BasicImage过滤器的rotation属性可以接受以下四个值中的一个：0,1,2或3，它们将分别旋转元素0,90,180或270度。

我应该使用什么代码让Internet Explorer旋转我的图像

3 个答案: