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

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