如何在 IE8 中使用 CSS 进行旋转和平移？答案

【问题标题】：How to rotate and translate using CSS in IE8?如何在 IE8 中使用 CSS 进行旋转和平移？
【发布时间】：2015-09-01 12:24:06
【问题描述】：

我们在页面中添加了一些使用转换规则的新奇特 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 特定的翻译添加到我已有的内容中。

【问题讨论】：

caniuse.com/#search=translate
对于古老的浏览器来说，依靠优雅的降级并不可耻。您是否有这么多 IE8 用户，以至于您的 whizbang 对他们很重要？
@isherwood 每次看到使用 IE8 的人并不多，但他们仍然购买我们的东西，所以让页面看起来很糟糕\对他们无法使用并不是最好的主意。我们已经放弃了对 IE7 的支持，因为我们的页面无法兼容它（而且几乎没有人使用它），但是 IE8 和 IE9 仍然被我们的用户广泛使用，所以我们需要稍微支持这些浏览器更长。

标签： css internet-explorer internet-explorer-8

【解决方案1】：

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

一开始我以为我可以简单地使用\9 hack来针对IE8，但不幸的是它不仅影响IE8及以下，还影响IE9和IE 10。

在测试过程中我还发现-ms-filter 是在搞乱 IE9，所以最后我使用条件 cmets 添加了 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]-->

【讨论】：