как сделать вращение изображения с помощью JavaScript в разных браузерах - PullRequest
Новая
       22

как сделать вращение изображения с помощью JavaScript в разных браузерах

2 голосов
/ 24 ноября 2011

я строю аналоговые часы с использованием JavaScript, я знаю, что будет намного проще, если я сделаю это с помощью jQuery, но это не вариант здесь.

Все работает в Chrome и Safari (имеется в виду браузеры webkit), но не работает ни в одном другом.

Вот мой метод тиков, в основном он поворачивает изображение в соответствии с временем. 

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: (" + deg + "deg);"
      + "-o-transform: (" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);"
    ); 
}

есть ли какие-нибудь предложения, чтобы это заработало?

1 Ответ

3 голосов
/ 24 ноября 2011

Вы не использовали rotate для свойств -moz- и -o-, rotation в синтаксисе IE 

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: rotate(" + deg + "deg);"
      + "-o-transform: rotate(" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "-ms-transform:rotate("+ deg +"deg);"
    ); 
}

Демо на http://jsfiddle.net/gaby/fjHHX/3/

Обновление

Изменен код для поддержки расширения IE9 -ms- и удален код filter, который не допускает произвольных поворотов ( только 0, 90, 180, 270 градусов ) ..

Для поддержки версий IE 8 и ниже вы можете использовать матричное преобразование, но оно уродливо .. посмотрите раздел .box_rotate на http://css3please.com/
или посмотритеу источника http://www.boogdesign.com/examples/transforms/matrix-calculator.html как это сделать

...