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

Question

Je souhaite modifier la propriété -webkit-transform: rotate() en utilisant JavaScript dynamiquement. Mais le setAttribute ne fonctionne pas couramment utilisé:

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

Le .style ne fonctionne pas non plus ...

Comment puis-je définir cette dynamique en JavaScript? Je sais que certains d'entre vous ont de l'expérience dans ce domaine auparavant.

Answer 1

Les noms de style JavaScript sont WebkitTransformOrigin et WebkitTransform

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

Vérifiez la référence d'extension DOM pour WebKit here.

Answer 2

Essayez d'utiliser

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

Answer 3

Voici les notations JavaScript pour les fournisseurs les plus courants:

webkitProperty 
MozProperty 
msProperty 
OProperty 
property 

réinitialiser transformons en ligne styles tels que:

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

Et comme celui-ci en utilisant jQuery:

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

Blog Voir poste Coding Vendor Prefixes with JavaScript (2012-03- 21).

Answer 4

Si vous voulez le faire via setAttribute vous changeriez l'attribut style comme ceci:

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

Ce serait utile si vous voulez réinitialiser tous les autres styles en ligne et seulement définir les valeurs de vos propriétés de style nécessaires encore une fois, MAIS dans la plupart des cas, vous ne pouvez pas vouloir cela. Voilà pourquoi tout le monde conseillé d'utiliser ceci:

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

ci-dessus est équivalente à

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>