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

112

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

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

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

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

javascript webkit rymn
источник
не устанавливаете ли вы атрибут стиля вместо этого?
Мухаммад Умер

Ответы:

201

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

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

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

Олафур Вааге
источник
10
Если вы хотите больше одного, разделите их пробелом. Например: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
Marc
1
Это отлично работает в Safari и Chrome, но не работает в Firefox. Какой эквивалентный способ сделать это для Firefox?
Ricardo Sanchez-Saez
3
MozTransform должен быть вашим другом.
haagmm
@Olafur Ссылка Apple мертва.
Carcigenicate
Это единственный способ сделать это со строкой. Похоже, было бы довольно медленно, если бы он был рекурсивным.
BBaysinger
89

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

Армель Ларсье
источник
5
jQuery автоматически выбирает правильный префикс, остается только написать transform.
Blaise
@Blaise Это ново. Начиная с какой версии?
Armel Larcier 01
1
Так происходит с jQuery 1.8.0. Фиксация на Github
Блез
1
win.style.transform ="translate(-50%)"не работает
МОМИН
11

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

img.style.webkitTransform = "rotate(60deg)"
Андрей Серделюк ॐ
источник
5

Если вы хотите сделать это через, 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)';
thednp
источник
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>
Дхрув Дхолакия
источник