Как настроить стиль -webkit-преобразование динамически с помощью JavaScript?

Я хочу изменить -webkit-transform: rotate() с помощью JavaScript динамически, но обычно используемый setAttribute не работает:

img.setAttribute('-webkit-transform', 'rotate(60deg)');

Не работает .style...

Как я могу установить это динамически в JavaScript?

Ответ 1

Имена стилей JavaScript: WebkitTransformOrigin и WebkitTransform

element.style.webkitTransform = "rotate(-2deg)";

Проверьте ссылку на расширение DOM для WebKit здесь.

Ответ 2

Вот обозначения JavaScript для большинства распространенных поставщиков:

webkitProperty
MozProperty
msProperty
OProperty
property

I reset встроенные стили преобразования, например:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

И, как это, используя jQuery:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

Смотрите сообщение в блоге Префиксы поставщика кодирования с JavaScript (2012-03-21).

Ответ 3

Попробуйте использовать

img.style.webkitTransform = "rotate(60deg)"

Ответ 4

Если вы хотите сделать это через setAttribute, вы должны изменить атрибут style следующим образом:

element.setAttribute('style','transform:rotate(90deg); -webkit-transform: rotate(90deg)') //etc

Это было бы полезно, если вы хотите reset использовать весь другой встроенный стиль и снова устанавливать значения свойств вашего стиля, но в большинстве случаев вам может и не понадобиться. Вот почему каждый посоветовал использовать это:

element.style.transform = 'rotate(90deg)';
element.style.webkitTransform = 'rotate(90deg)';

Вышеупомянутое эквивалентно

element.style['transform'] = 'rotate(90deg)';
element.style['-webkit-transform'] = 'rotate(90deg)';

Ответ 5

Чтобы анимировать 3D-объект, используйте код:

<script>

$(document).ready(function(){

    var x = 100;
    var y = 0;
setInterval(function(){
    x += 1;
    y += 1;
    var element = document.getElementById('cube');
    element.style.webkitTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for safari and chrome
    element.style.MozTransform = "translateZ(-100px) rotateY("+x+"deg) rotateX("+y+"deg)"; //for firefox
},50);
//for other browsers use:   "msTransform",    "OTransform",    "transform"

});

</script>