title: CSS transform rotate not working in internet explorer 11
body: <p>I have written an application which animates text elements (individual letters are each inside a span element).</p>
  <p>I am seeing the following strange effect in Internet Explorer 11 (In Chrome everything works fine):</p>
  <h2>Scenario 1:</h2>
  <pre><code>letters
     .style(&quot;-webkit-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .style(&quot;-ms-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .style(&quot;-mozilla-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .style(&quot;transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .transition()
     .style(&quot;-webkit-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
     .style(&quot;-ms-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
     .style(&quot;-mozilla-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;)
     .style(&quot;transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
  </code></pre>
  <p><strong>My intention:</strong> to display letters almost invisible (scale.001) and transition them to grow to the regular size while rotating them twice.</p>
  <p><strong>My approach:</strong> seems to my knowledge to be the correct way. (You see here the d3.js version of the transition, which should not matter to my understanding).
  the <code>transform</code> CSS style is first prefixed for some browsers which don't support the regular <code>transform</code> property. After these browsers implement the desired property it can and should be invoked by the regular property (without prefix). For that reason the regular property should be called last to ensure proper behaviour.</p>
  <p><strong>Result:</strong><br />
  This works fine in Chrome, in IE 11 however, the scaling transition works but there is no rotation.</p>
  <h2>Scenario 2:</h2>
  <p>(just using the prefix versions of transform, dropping the regular bare-bone transform)</p>
  <pre><code>letters
     .style(&quot;-webkit-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .style(&quot;-ms-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .style(&quot;-mozilla-transform&quot;, &quot;rotate(-0deg) scale(.001)&quot;)
     .transition()
     .style(&quot;-webkit-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
     .style(&quot;-ms-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
     .style(&quot;-mozilla-transform&quot;, &quot;rotate(-720deg) scale(1)&quot;); 
  </code></pre>
  <p>This should not be the right approach since IE 11 already implemented transform. However, this produces the correct result (for IE 11).</p>
  <h2>Scenario 3:</h2>
  <p>I just open the website:
  <a href="https://css-tricks.com/almanac/properties/t/transform/" rel="nofollow noreferrer">https://css-tricks.com/almanac/properties/t/transform/</a>
  in Internet Explorer 11 and there the &quot;regular&quot; CSS transform rotations are displayed as desired. There the examples are embedded in Codepen.</p>
  <p>I have the following questions:</p>
  <p>Why does scenario 1 not work in IE 11 ? (have also tried various changes with no effect, such as just rotation no scaling, etc.)?</p>
  <p>Scenario 2 works, but doesn't seem to be the way to go, since I have to omit the regular barebone transform property. Am I right not to pursuit that path?</p>
  <p>In scenario 3 the regular transform works fine, the only difference seems to be, it is embedded in Codepen. What is the reason for this - does it help us finding a solution to question 1 (which should run on a web server not in codepen?</p>
  <p>p.s. in stackoverflow I found this related question (<a href="https://stackoverflow.com/questions/45715377/rotate-and-scale-does-not-work-in-ie11">Rotate and scale does not work in IE11</a>), but it doesn't help.</p>
  <h2>Update May 30th</h2>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;
      &lt;style&gt;
        span {display: inline-block;}
      &lt;/style&gt;
    &lt;/head&gt;
   
    &lt;body&gt;
      &lt;script&gt;
        var letters1 = d3.select(&quot;body&quot;)
          .selectAll(&quot;span.notWorking&quot;)
          .data(&quot;Hello stackoverflow!&quot;)
          .enter()
          .append(&quot;span&quot;)
          .attr(&quot;class&quot;, &quot;notWorking&quot;);
       
        //this is desirable but doesn't work in IE11:
        // transform rotate doesn&gt;'t work, but e.g. transform scale does
        letters1
          .style(&quot;-ms-transform&quot;, &quot;rotate(0deg)&quot;)
          .style(&quot;transform&quot;, &quot;rotate(0deg)&quot;)
          //.style(&quot;transform&quot;, &quot;scale(0.01)&quot;)
          .text(function(d){return d;})
          .transition()
          .style(&quot;-ms-transform&quot;, &quot;rotate(720deg)&quot;)
          .style(&quot;transform&quot;, &quot;rotate(720deg)&quot;);
          //.style(&quot;transform&quot;, &quot;scale(1)&quot;);
         
        var letters2 = d3.select(&quot;body&quot;)
          .selectAll(&quot;span.working&quot;)
          .data(&quot;Hello stackoverflow!&quot;)
          .enter()
          .append(&quot;span&quot;)
          .attr(&quot;class&quot;, &quot;working&quot;);
       
        //this is not desirable (since the regular transform can't be used) but works in IE11:
        letters2
          .style(&quot;-ms-transform&quot;, &quot;rotate(0deg)&quot;)
          .text(function(d){return d;})
          .transition()
          .style(&quot;-ms-transform&quot;, &quot;rotate(720deg)&quot;);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
   
  </code></pre>
  <p>Any help would be greatly appreciated!</p>