title: WebKitCSSMatrix rotate method on iOS (safari, chrome, and other browsers) generates matrix different than the method in other OS
body: <p>Using the constructor WebKitCSSMatrix I use 'rotate' method to generate a matrix (string) which I apply on a DOM element. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var square = document.querySelector('.square');
  
  var matrix = new WebKitCSSMatrix().rotate(15);
  
  square.style.webkitTransform = matrix;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    background: lightblue;
  }
  .square {
    position: absolute;
    width: 200px;
    height: 200px;
    background: #ccc;
    border: 1px solid white;
    text-align: center;
    top: 200px;
    left: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div class="square"&gt;&lt;span&gt;test&lt;/span&gt;
      &lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the above example the rectangle should not be visible.</p>
  
  <p>Now most major devices work well. However, ipad (tested on two different devices) generates matrix with a and d value equals to 0 - transform:  matrix(a, c, b, d, tx, ty).</p>
  
  <p>Above example generates:</p>
  
  <p>Safari or Chrome on iOS (8.3) ipadMini matrix generated:
  matrix(0, 0.258819, 0, 0.965926, 0, 0);</p>
  
  <p>Chrome on Mac Yosemite, Win8.1, Android (or any other browser on those devices):
  matrix(0.965926, 0.258819, -0.258819, 0.965926, 0, 0);</p>
  
  <p>Is that an already reported bug relating to ipad devices or I miss some sort of 'rotate' method intention there?</p>