SVGtransform:rotate()在ie9中不起作用

时间:2017-03-10 07:36:39

标签: html css internet-explorer-9 css-transitions

Iam在块级元素中使用svg in>我尝试使用transformrotate(180deg)旋转该块。这在firefox和chrome以及IE Edge中工作正常。当我打开IE9时它无法正常工作。如何解决这个问题。

2 个答案:

答案 0 :(得分:0)

IE9不支持transform: rotate(180deg),您必须添加-ms前缀才能进行元素转换。

代码示例:https://jsfiddle.net/s8hdhurc/

<html>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <!-- This is important as -ms-rotate does not work in quirks mode -->
            <style>
                .rotate {
                    -ms-transform: rotate(180deg); /* IE 9 */
                    -webkit-transform: rotate(180deg); /* Safari */
                    transform: rotate(180deg);
                }
            </style>
        </head>
        <body>
            <div class="rotate">
                <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg">
            </div>
        </body>
    </html>

答案 1 :(得分:0)

我相信这个问题已在这里得到解答:CSS3 transform: rotate; in IE9

那家伙可以比我更好地解释它,所以我只是发布一个链接。