web-dev-qa-db-fra.com

Comment définir le style -webkit-transform de manière dynamique en utilisant JavaScript?

Je souhaite modifier la propriété -webkit-transform: rotate() à l'aide de JavaScript de manière dynamique, mais le setAttribute couramment utilisé ne fonctionne pas:

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

Le .style ne fonctionne pas non plus ...

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

javascriptwebkit
103
rymn

Les noms de style JavaScript sont WebkitTransformOrigin et WebkitTransform

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

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

190
Ólafur Waage

Voici les notations JavaScript pour les fournisseurs les plus courants:

webkitProperty
MozProperty
msProperty
OProperty
property

Je réinitialise les styles de transformation en ligne tels que:

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

Et comme ceci en utilisant jQuery:

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

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

86
Armel Larcier

Essayez d'utiliser

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

Si vous voulez le faire via setAttribute, vous modifierez l'attribut style comme suit:

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 redéfinir que les valeurs de vos propriétés de style requises, 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 est équivalent à

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

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>
2
Dhruv Dholakia