Comment définir dynamiquement le style -webkit-transform en utilisant JavaScript?

112

Je souhaite modifier la -webkit-transform: rotate()propriété en utilisant JavaScript de manière dynamique, mais le couramment utilisé setAttributene fonctionne pas:

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

Le .stylene fonctionne pas non plus ...

Comment puis-je définir cela dynamiquement dans JavaScript?

javascript webkit rymn
la source
tu ne définiras pas l'attribut de style au lieu de celui-ci
Muhammad Umer

Réponses:

201

Les noms de style JavaScript sont WebkitTransformOriginetWebkitTransform

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

Vérifiez la référence de l'extension DOM pour WebKit ici .

Ólafur Waage
la source
9
Si vous en voulez plus d'un, séparez-les par un espace Par exemple: element.style.webkitTransform = "rotate(-2deg) translateX(100px)";
Marc
1
Cela fonctionne bien sur Safari et Chrome, mais ne fonctionnera pas sur Firefox. Quelle est la manière équivalente de faire cela pour Firefox?
Ricardo Sanchez-Saez
3
MozTransform devrait être votre ami.
haagmm
@Olafur Le lien Apple est mort.
Carcigenicate
C'est donc la seule façon de faire cela avec une chaîne. On dirait que ce serait assez lent s'il était récursif.
BBaysinger
89

Voici les notations JavaScript pour les fournisseurs les plus courants:

webkitProperty
MozProperty
msProperty
OProperty
property

Je réinitialise les styles de transformation en ligne comme:

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

Et comme ça en utilisant jQuery:

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

Voir l'article de blog Codage des préfixes des fournisseurs avec JavaScript (2012-03-21).

Armel Larcier
la source
5
jQuery choisit automatiquement le bon préfixe, il suffit d'écrire transform.
Blaise
@Blaise C'est nouveau. À partir de quelle version?
Armel Larcier
1
C'est le cas depuis jQuery 1.8.0. Commit on Github
Blaise
1
win.style.transform ="translate(-50%)"ne fonctionne pas
Momin
11

Essayez d'utiliser

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

Si vous voulez le faire via setAttributevous changeriez l' styleattribut comme ceci:

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

Cela serait utile si vous souhaitez réinitialiser tous les autres styles en ligne et ne définir à nouveau que les valeurs de vos propriétés de style nécessaires, MAIS dans la plupart des cas, vous ne le souhaitez peut-être pas. C'est pourquoi tout le monde a conseillé d'utiliser ceci:

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

Ce qui précède équivaut à

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

Pour animer votre objet 3D, utilisez le code: 

<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
la source