title: CSS3 "transform" property works different in IE9
body: <p>I'm trying a few things here with SVG, CSS3 <code>transform</code> and in different browsers.<br>
  This is my HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/&gt;
      &lt;style type="text/css"&gt;
      .svg-holder {
          text-align: center;
          padding: 50px;
      }
      .img1 {
          transform: rotate(180deg); /* IE10 and Mozilla */
          -ms-transform: rotate(180deg); /* IE 9 */
          -webkit-transform: rotate(180deg); /* Chrome and Safari */
      }
      .img2 {
          transform: scale(3,3); /* IE10 and Mozilla */
          -ms-transform: scale(3,3); /* IE 9 */
          -webkit-transform: scale(3,3); /* Chrome and Safari */
      }
      .bg {
          background-color: yellow;
          background-image: url(arrow.svg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width: 100px;
          height: 100px;
          margin: 0 auto;
          transform: rotate(90deg);
          -ms-transform: rotate(90deg); /* IE 9 */
          -webkit-transform: rotate(90deg);
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="svg-holder img1"&gt;
          &lt;img src="arrow.svg" class="red-arrow"&gt;
      &lt;/div&gt;
      &lt;div class="svg-holder img2"&gt;
          &lt;img src="arrow.svg"&gt;
      &lt;/div&gt;
  
      &lt;div class="svg-holder bg"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The "arrow.svg" file content is (but you may use what ever .svg you'd like):</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="35.551px" height="35.551px" viewBox="0 0 35.551 35.551" enable-background="new 0 0 35.551 35.551" xml:space="preserve"&gt;
  &lt;polygon fill="#404040" points="17.775,0 0,17.775 11.109,17.775 11.109,35.551 24.441,35.551 24.441,17.775 35.551,17.775 "/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>However, the way the above code is being rendered is different between IE9 and the rest of the (normal) browsers. Pay attention to the highlighted arrow (arrow points UP by default), with the class <code>.bg</code></p>
  
  <p>Here is a screenshot from Chrome, the arrow is rotated 90 degrees and points RIGHT (the correct way to render this code):<br>
  <a href="https://i.stack.imgur.com/GGTpe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GGTpe.png" alt="chrom-result"></a>
  </p>
  
  <p>and here is a screenshot from IE9, the arrow is rotated 180 degrees and points DOWN:<br>
  <a href="https://i.stack.imgur.com/zRI6b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zRI6b.png" alt="ie9-result"></a>
  </p>
  
  <p>Can anyone please explain this?</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p><a href="https://jsfiddle.net/ZenMaster/mXgVE/" rel="nofollow noreferrer">JSFiddle with simpler example</a></p>