Как установить стиль -webkit-transform динамически, используя JavaScript?

Question

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

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

.style тоже не работает ...

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

Answer 1

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

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

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

Answer 2

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

webkitProperty
MozProperty
msProperty
OProperty
property

Я сбрасываю стили встроенного преобразования, такие как:

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).

Answer 3

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

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

Answer 4

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

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

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

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

Выше эквивалентно

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

Answer 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>