title: Applying css class with webkit transform does not work in Safari or Chrome
body: <p>I'm applying this css class:</p>
  
  <pre><code>.turn90{
  -moz-transform: rotate(90deg);  /* FF3.5+ */
  -o-transform: rotate(90deg);  /* Opera 10.5 */
  -webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
  }
  </code></pre>
  
  <p>via:</p>
  
  <pre><code>document.getElementById("advancedsearchtoggle").className += " turn90"; 
  </code></pre>
  
  <p>It works sufficiently in Firefox and Opera, but not in Safari or Chrome. (Haven't tried IE yet)</p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>The Complete JavaScript function:</strong></p>
  
  <pre><code>    var expanded=0;
      function searchparts(n)
      {
          if(expanded == 0){
              document.getElementById('search2').style.visibility = 'visible'; 
              document.getElementById('search3').style.visibility = 'visible'; 
              document.getElementById('search2').style.display = 'block'; 
              document.getElementById('search3').style.display = 'block'; 
              //window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
              document.getElementById("advancedsearchtoggle").className += " turn90"; 
              document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
  
              expanded = 1;   
          }else if(expanded == 1){
              document.getElementById('search2').style.visibility = 'collapse'; 
              document.getElementById('search3').style.visibility = 'collapse'; 
              document.getElementById('search2').style.display = 'none'; 
              document.getElementById('search3').style.display = 'none';
              window.scrollTo(0,findPos(document.getElementById('search1'))-60);
              document.getElementById("advancedsearchtoggle").className = " ";    
              document.getElementById('advancedsearchtoggle').style.webkitTransform = 'rotate(-90deg)'; 
  
              expanded = 0;   
          }
      }
  </code></pre>
  
  <p>This is the HTML that triggers the javascript:</p>
  
  <pre><code>&lt;a class="plain" onclick="searchparts(2);" style="margin-right:20px;"&gt;&lt;span style="text-decoration:underline;"&gt;Erweiterte Suche&lt;/span&gt; &lt;span id="advancedsearchtoggle" style="text-decoration:none;"&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>As you can see, even when putting</p>
  
  <pre><code>document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
  </code></pre>
  
  <p>directly into the javascript, it doesn't work. When I inspect the "advancedsearchtoggle", I can see that the class get's applied correctly (and any other css I put into the class). Just the rotate doesn't seem to work in Safari &amp; Chrome.</p>