title: How to set a div's rotation angle in javascript?
body: <p>Or more generally, is there a way to add arbitrary CSS to an HTML element in javascript without JQuery?</p>
  
  <p>Right now this works in Chrome, Firefox and IE 9/10.</p>
  
  <pre><code>var css = getRotationCSS(angle);
  var div = document.getElementById('mydiv');
  //div.css = css; ???
  div.innerHTML = '&lt;div style="'+css+'"&gt;HELLO&lt;/div&gt;';
  </code></pre>
  
  <p>I have to add a div inside the div to get to style=''</p>
  
  <p>All the examples I've seen just have a hardcoded angle but I need it to work for any angle 0-360, should I make 360 classes, 1 for each degree, then set the class?</p>
  
  <pre><code>function getRotationCSS(deg)
  {
      return "\
          -webkit-transform: rotate("+deg+"deg); \
          -moz-transform: rotate("+deg+"deg); \
          -ms-transform: rotate("+deg+"deg); \
          -o-transform: rotate("+deg+"deg); \
          transform: rotate("+deg+"deg); \
          -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \
          filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \
      ";
  }
  </code></pre>
  
  <p>Yes the IE 7/8 code is not correct, I need a function to convert the degrees to a matrix.</p>
  
  <p>Also the IE 7/8 code doesn't rotate it at all when I emulate IE 7/8 in my IE 10. I googled the code and it's supposed to rotate it by 45:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div style='border:1px solid green;margin:333px;padding:333px;'&gt;
              &lt;div style="
                  -webkit-transform: rotate(45deg);
                  -moz-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                  transform: rotate(45deg);
                  -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\";
                  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');
              "&gt;
                  HELLO
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>