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
source

tu ne définiras pas l'attribut de style au lieu de celui-ci

— Muhammad Umer

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