Поворот изображения в IE вызывает автоматический перевод. Как убрать перевод?

Question

Я пытаюсь реализовать виджет датчика для веб-сайта.В спецификации сказано, что разрешен только HTML / CSS, поэтому я не могу использовать JavaScript (не спрашивайте меня, почему - может быть, если есть действительно простой способ сделать это с помощью JavaScript, я бы убедил руководителя проекта).

Пока у меня есть div с фоновым изображением, которое показывает заднюю часть датчика.Внутри этого div находится img, который вращается в зависимости от значения датчика.Это значение динамически вводится в HTML с использованием PHP.

Датчик работает нормально в 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

Answer 2

Я нашел решение без JS, для IE - см. Здесь

Answer 3

Это будет трудно решить без JavaScript, если ваш датчик движется только на пару шагов (скажем, 15, 30, 45 ... град), вы можете использовать этот инструмент:

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

и вручную передать значения margin-left и margin-top в IE.

В противном случае я бы рекомендовал javascript с CSSSandPaper того же автора.http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.