How to set the style -webkit-transform dynamically using JavaScript

Question

I want to change the -webkit-transform  rotate   property using JavaScript dynamically  but the commonly used setAttribute is not working   img setAttribute  -webkit-transform    rotate 60deg       The  style is not working either     How can I set this dynamically in JavaScript

User · Answer

Try using  img style webkitTransform    rotate 60deg

User · Answer

The JavaScript style names are WebkitTransformOrigin and WebkitTransform  element style webkitTransform    rotate -2deg      Check the DOM extension reference for WebKit here

User · Answer

To animate your 3D object  use the code      lt script gt     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         lt  script gt

User · Answer

Here are the JavaScript notations for most common vendors   webkitProperty MozProperty msProperty OProperty property   I reset inline transform styles like   element style webkitTransform       element style MozTransform       element style msTransform       element style OTransform       element style transform         And like this using jQuery     element  css        webkitTransform           MozTransform           msTransform           OTransform           transform           See blog post Coding Vendor Prefixes with JavaScript  2012-03-21

User · Answer

If you want to do it via setAttribute you would change the style attribute like so   element setAttribute  style   transform rotate 90deg   -webkit-transform  rotate 90deg      etc   This would be helpful if you want to reset all other inline style and only set your needed style properties  values again  BUT in most cases you may not want that  That s why everybody advised to use this   element style transform    rotate 90deg    element style webkitTransform    rotate 90deg      The above is equivalent to  element style  transform      rotate 90deg    element style  -webkit-transform      rotate 90deg

[javascript] How to set the style -webkit-transform dynamically using JavaScript?

Examples related to javascript

Examples related to webkit