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

我正在尝试为一个网站实现一个gauge小部件。规范中说只允许使用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>

---

这里的问题是图像正在围绕一个你不希望它旋转的点旋转

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

例如，您将使用，

-webkit transform origin

，

-o-transform-origin

，

-ms transform origin

，

-etc transform origin

有关如何在MSIE中处理矩阵过滤器的信息，请查看此页面：

---

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

并手动将左边距和顶端距值传递给IE

---

否则我会推荐同一作者的带有CSSSandPaper的javascript

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

Ok。那么在IE中我该怎么做呢？它在FireFox/Safari中运行良好。@jnpcl:是的。。。对于-

ms转换

。。。但是对于矩阵滤波器，它是trickier@jnpcl：哈哈，是的。。。但当我发布该评论时，只有-moz转换来源。Dancrumb在我发布评论后编辑了它：）快速浏览了一下——你确定你没有使用JS吗？我可以在小提琴上看到很多JS…JS被用来做一个纯粹的计算，你可以事先在任何其他浏览器上做，甚至在服务器端。其想法是不必在呈现图像的IE浏览器上实时计算