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

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

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

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

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

5 95
javascript webkit

5 ответов:

имена стилей JavaScript являются WebkitTransformOrigin и WebkitTransform

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

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

176

вот обозначения 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).

83

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

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

если вы хотите сделать это через setAttribute изменить вот так:

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)';
2

чтобы анимировать 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>
2