title: CSS Cross-browser Text Rotation
body: <p>I am having problems getting text rotation to work in both Chrome and IE (11.0). In IE the texts rotates 180 and 360 degrees instead of 90 and 270.</p>
  
  <p>This is the CSS-style (among others) I have tested:</p>
  
  <pre><code>.rot90 {
      -webkit-transform:rotate(90deg);
      -moz-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
      -o-transform:rotate(90deg);
      transform:rotate(90deg);
  
      -webkit-transform-origin: 0px 0px;
      -moz-transform-origin: 0px 0px;
      -ms-transform-origin: 0px 0px;
      -o-transform-origin: 0px 0px;
      transform-origin: 0px 0px;
  
      border: 0px solid;
      white-space: nowrap;
      position:absolute;
      display:inline-block;
  
      padding-bottom: 5px;
  
      writing-mode: tb-rl;
  }
  
  .rot270 {
      -webkit-transform:rotate(270deg);
      -moz-transform:rotate(270deg);
      -ms-transform:rotate(270deg);
      -o-transform:rotate(270deg);
      transform:rotate(270deg);
  
      -webkit-transform-origin: 0px 0px;
      -moz-transform-origin: 0px 0px;
      -ms-transform-origin: 0px 0px;
      -o-transform-origin: 0px 0px;
      transform-origin: 0px 0px;
  
      border: 0px solid;
      white-space: nowrap;
      position:absolute;
      display:inline-block;
  
      padding-bottom: 5px;
  
      writing-mode: tb-rl;
  }
  </code></pre>
  
  <p>I need the transform origin to be at: 0px 0px.</p>
  
  <p>Here is a jsfiddle: </p>
  
  <ul>
  <li><a href="https://jsfiddle.net/wonc4px9/2/" rel="nofollow">https://jsfiddle.net/wonc4px9/2/</a></li>
  </ul>
  
  <p>Another jsfiddle using the <a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html" rel="nofollow" title="CSS Matrix Rotation Calculator">http://www.boogdesign.com/examples/transforms/matrix-calculator.html</a>  </p>
  
  <ul>
  <li><a href="https://jsfiddle.net/wonc4px9/5/" rel="nofollow">https://jsfiddle.net/wonc4px9/5/</a></li>
  </ul>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is a working solution based on the marked answer, it was the writing-mode that messed things up: <a href="https://jsfiddle.net/wonc4px9/6/" rel="nofollow">https://jsfiddle.net/wonc4px9/6/</a></p>
  
  <pre><code>.rot90 {
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand');
      -moz-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
      -webkit-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
      -o-transform:  matrix(0.00000000, 1.00000000, -1.00000000, 0.00000000, 0, 0);
  
      -ms-transform:rotate(90deg);
  
      -webkit-transform-origin: 0px 0px;
      -moz-transform-origin: 0px 0px;
      -ms-transform-origin: 0px 0px;
      -o-transform-origin: 0px 0px;
      transform-origin: 0px 0px;
  
      border: 0px solid;
      white-space: nowrap;
      position:absolute;
      display:inline-block;
  
      padding-bottom: 5px;
  }
  
  .rot270 {
  
      -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
      -moz-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
      -webkit-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
      -o-transform:  matrix(-0.00000000, -1.00000000, 1.00000000, -0.00000000, 0, 0);
  
      -ms-transform:rotate(270deg);
  
      -webkit-transform-origin: 0px 0px;
      -moz-transform-origin: 0px 0px;
      -ms-transform-origin: 0px 0px;
      -o-transform-origin: 0px 0px;
      transform-origin: 0px 0px;
  
      border: 0px solid;
      white-space: nowrap;
      position:absolute;
      display:inline-block;
  
      padding-bottom: 5px;
  }
  </code></pre>