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 中处理矩阵过滤器的信息： https://github.com/heygrady/transform/wiki/ Correcting-transform-origin-and-translate-in-ie