IE中的图像旋转会导致自动翻译。如何删除翻译？

Question

我正在尝试为网站实施量表小部件。规范说只允许使用HTML / CSS，所以我不能使用JavaScript（不要问我为什么 - 也许如果有一个真的使用JavaScript这样做的简单方法我可以说服项目铅）。

到目前为止，我有一张div的背景图片，显示了仪表的背面。在这个div内部是一个img，它根据仪表值旋转。使用PHP将此值动态注入HTML。

测量仪在Safari / FireFox中工作正常，但在IE中断。如果我为图像添加边框，我可以看到原因 - 看起来IE旋转还包括自动平移，以便针偏离中心（见下面的屏幕截图）。

所以，问题是：如何在IE中将指针移回指针的中心？

<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">

<img src="genies/gauge-needle.png" 
 style="-moz-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        transform: rotate(45deg); 
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />

</div>

Answer 1

这里的问题是图像围绕您不期望的点旋转。

您需要将变换原点设置为图像的中心。

例如，您可以使用-moz-transform-origin，-webkit-transform-origin，-o-transform-origin，-ms-transform-origin，-etc-transform-origin ......

有关如何在MSIE中处理Matrix过滤器的信息，请查看此页面： https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie

Answer 2

如果没有javascript，这将很难解决，如果您的仪表仅移动几个增量（例如，15,30,45 ...度），您可以使用此工具：

http://www.useragentman.com/IETransformsTranslator/

并手动将margin-left和margin-top值传递给IE。

否则我会推荐同一作者使用CSSSandPaper的javascript。 http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/。

Answer 3

我找到了一个没有JS的解决方案，用于IE - see here