Як динамічно встановити стиль -webkit-transform з використанням JavaScript?

112

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

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

Теж .styleне працює ...

Як я можу це динамічно встановити в JavaScript?

javascript webkit

— римн
джерело

Ви не можете встановити атрибут стилю замість цього лише

— Мухаммед Умер

201

Імена стилів JavaScript - це WebkitTransformOriginіWebkitTransform

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

Перевірте посилання розширення DOM для WebKit тут .

— Flafur Waage
джерело

9

Якщо ви хочете більше то один, індивідуальний з простором Наприклад: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Марк

1

Це добре працює на Safari та Chrome, але не працює на Firefox. Який еквівалентний спосіб зробити це для Firefox?

— Рікардо Санчес-Саес

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 (2012-03-21).

— Армель Ларсьє
джерело

5

jQuery автоматично вибирає правильний префікс, залишається лише писати transform.

— Блейз

@Blaise Це нове. Починаючи з якої версії?

— Армель Ларсьє

1

Це робиться з jQuery 1.8.0. Поспілкуватися над Github

— Blaise

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>

— Dhruv Dholakia
джерело