Come impostare lo stile -webkit-transform in modo dinamico utilizzando JavaScript?

112

Voglio cambiare la -webkit-transform: rotate()proprietà usando JavaScript in modo dinamico, ma quello comunemente usato setAttributenon funziona:

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

Il .stylenon funziona o ...

Come posso impostarlo dinamicamente in JavaScript?

javascript webkit

— rymn
fonte

non imposterai l'attributo di stile invece di questo solo

— Muhammad Umer

201

I nomi degli stili JavaScript sono WebkitTransformOrigineWebkitTransform

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

Controllare il riferimento estensione DOM per WebKit qui .

— Ólafur Waage
fonte

9

Se vuoi più di uno, separalo con uno spazio Ad esempio: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";

— Marc

1

Funziona bene su Safari e Chrome, ma non su Firefox. Qual è il modo equivalente per farlo per Firefox?

— Ricardo Sanchez-Saez

3

MozTransform dovrebbe essere tuo amico.

— haagmm

@Olafur Il collegamento Apple è morto.

— Carcigenicate

Quindi è l'unico modo per farlo con una stringa. Sembra che sarebbe piuttosto lento se fosse ricorsivo.

— BBaysinger

89

Ecco le notazioni JavaScript per i fornitori più comuni:

webkitProperty
MozProperty
msProperty
OProperty
property

Ripristino gli stili di trasformazione in linea come:

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

E in questo modo usando jQuery:

$(element).css({
    "webkitTransform":"",
    "MozTransform":"",
    "msTransform":"",
    "OTransform":"",
    "transform":""
});

Vedere il post sul blog Coding Vendor Prefixes with JavaScript (2012-03-21).

— Armel Larcier
fonte

5

jQuery sceglie automaticamente il prefisso giusto, devi solo scrivere transform.

— Blaise

@ Blaise Questo è nuovo. A partire da quale versione?

— Armel Larcier

1

Lo fa da jQuery 1.8.0. Impegnati su GitHub

— Blaise

1

win.style.transform ="translate(-50%)"non funziona

— Momin

11

Prova a usare

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

— Andrei Serdeliuc ॐ
fonte

5

Se vuoi farlo tramite setAttribute, cambierai l' styleattributo in questo modo:

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

Ciò sarebbe utile se desideri reimpostare tutti gli altri stili in linea e impostare di nuovo solo i valori delle proprietà di stile necessari, MA nella maggior parte dei casi potresti non volerlo. Ecco perché tutti consigliano di usare questo:

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

Quanto sopra è equivalente a

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

— thednp
fonte

2

Per animare il tuo oggetto 3D, usa il codice:

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