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

Question

我正在尝试为网站实现一个仪表小部件。规范说只允许使用 HTML/CSS，所以我不能使用 JavaScript(不要问我为什么——也许如果有一个真的用 JavaScript 做的简单方法我可以说服元素铅)。

到目前为止，我有一个 div，其背景图像显示了仪表的背面。在这个 div 中是一个旋转的 img，具体取决于 gauge 值。该值使用 PHP 动态注入(inject)到 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 -起源...

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