Как динамически установить стиль -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>

— Дхрув Дхолакия
источник