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

Question

Je veux changer le -webkit-transform: rotate() à l'aide de JavaScript de manière dynamique, mais l'option la plus courante, le setAttribute ne fonctionne pas :

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

Le site .style ne fonctionne pas non plus...

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

Answer 1

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 .

Answer 2

Voici les notations JavaScript pour les vendeurs 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).

Answer 3

Essayez d'utiliser

img.style.webkitTransform = "rotate(60deg)"

Answer 4

Si vous voulez le faire via setAttribute vous changeriez le style attribue comme ça :

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

Cela peut s'avérer utile si vous souhaitez réinitialiser tous les autres styles en ligne et ne redéfinir que les valeurs des propriétés de style dont vous avez besoin, MAIS dans la plupart des cas, vous ne le souhaitez pas. C'est pourquoi tout le monde conseille d'utiliser cette option :

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)';

Answer 5

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>