Wie setze ich die Stil-Webkit-Transformation dynamisch mit JavaScript?

112

Ich möchte die -webkit-transform: rotate()Eigenschaft mithilfe von JavaScript dynamisch ändern , aber die häufig verwendete Funktion setAttributefunktioniert nicht:

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

Das .stylefunktioniert auch nicht ...

Wie kann ich dies dynamisch in JavaScript einstellen?

javascript webkit Hymne
quelle
Sie werden nicht nur dieses Stilattribut festlegen
Muhammad Umer

Antworten:

201

Die Namen der JavaScript-Stile sind WebkitTransformOriginundWebkitTransform

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

Überprüfen Sie die DOM - Erweiterung Referenz für WebKit hier .

Ólafur Waage
quelle
9
Wenn Sie mehr als eine möchten, trennen Sie diese mit einem Leerzeichen. Zum Beispiel: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
Marc
1
Dies funktioniert gut unter Safari und Chrome, aber nicht unter Firefox. Was ist die äquivalente Vorgehensweise für Firefox?
Ricardo Sanchez-Saez
3
MozTransform sollte dein Freund sein.
haagmm
@Olafur Der Apple Link ist tot.
Carcigenicate
Dies ist also die einzige Möglichkeit, dies mit einer Zeichenfolge zu tun. Es scheint ziemlich langsam zu sein, wenn es rekursiv wäre.
BBaysinger
89

Hier sind die JavaScript-Notationen für die meisten gängigen Anbieter:

webkitProperty
MozProperty
msProperty
OProperty
property

Ich setze Inline-Transformationsstile zurück wie:

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

Und so mit jQuery:

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

Siehe Blog-Beitrag Codieren von Herstellerpräfixen mit JavaScript (2012-03-21).

Armel Larcier
quelle
5
jQuery wählt automatisch das richtige Präfix aus, muss nur schreiben transform.
Blaise
@Blaise Das ist neu. Ab welcher Version?
Armel Larcier
1
Dies ist seit jQuery 1.8.0 der Fall. Commit auf Github
Blaise
1
win.style.transform ="translate(-50%)"funktioniert nicht
Momin
11

Versuchen Sie es mit

img.style.webkitTransform = "rotate(60deg)"
Andrei Serdeliuc ॐ
quelle
5

Wenn Sie dies über tun möchten, setAttributewürden Sie das styleAttribut folgendermaßen ändern :

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

Dies ist hilfreich, wenn Sie alle anderen Inline-Stile zurücksetzen und nur die Werte Ihrer benötigten Stileigenschaften erneut festlegen möchten. In den meisten Fällen möchten Sie dies jedoch möglicherweise nicht. Deshalb rieten alle dazu:

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

Das obige ist äquivalent zu

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

Verwenden Sie den Code, um Ihr 3D-Objekt zu animieren: 

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