Internet Explorer语言 - 如何在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 在旋转的同时进行平移，但我设法使用旧的边距实现了我的目标。

起初我以为我可以简单地使用 9 hack 来针对 IE8，但不幸的是它不仅影响 IE8 及更低版本，还影响 IE9 和 IE 10。

在测试过程中，我还发现 -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]-->