如何在IE8中使用CSS旋转和平移？

Question

我们向使用转换规则的页面添加了一些新奇的 css，但是我们需要保持与 IE8 的兼容性，而这些规则在那里不起作用。我们所做的只是旋转和平移一些元素，我设法使用以下代码在 IE8 中进行旋转：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";

但是我不知道如何做翻译部分。我试图将第三列添加到矩阵中，看看它是否会起作用，但没有发生任何转换。我尝试了有和没有 px，但结果是一样的。我还尝试添加第三行 (0,0,1)，但这也没有用。

我知道有解决此问题的解决方法库，但老实说这太过分了。我只需要将 IE8 特定的翻译添加到我已有的内容中。

Answer 1

我还没有弄清楚如何（或者如果我可以）使用 -ms-filter 在旋转的同时进行平移，但我设法使用良好的旧边距实现了我的目标。

起初我以为我可以简单地使用 </code> hack 来针对 IE8，但不幸的是它不仅影响 IE8 及以下版本，而且还影响 IE9 和 IE 10。</p> <p>在测试期间我还发现 <code>-ms-filter 与 IE9 混淆，所以最后我使用条件注释添加了 IE8 特定的 css：

<!--[if lt IE 9]>
<style>
    .something{
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";
        margin-left:-40px
        margin-top:-40px
    }
</style>
<![endif]-->

如何在IE8中使用CSS旋转和平移？

How to rotate and translate using CSS in IE8?

css

internet-explorer

internet-explorer-8