title: CSS3 Rotate3d in desired direction
body: <p>In <a href="http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html" rel="nofollow">this demo</a> of rotate3d from the W3C, the first example is rotating the face of a div toward the "upper left".</p>
  
  <p>However, with the same vector I can't get the face of a div to rotate toward the "upper left". How can I get this same rotation?</p>
  
  <p><a href="http://jsfiddle.net/GJ8qB/5/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>#r {
      position: absolute;
      top: 100px;
      left: 100px;
      border: 7px dotted;
      width: 200px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      -webkit-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
      -webkit-transform: rotate3d(0, 0, 0, 0deg);
      transform: rotate3d(0, 0, 0, 0deg);
  }
  
  #r:hover {
      -webkit-transform: rotate3d(1, -1, 0, 70deg);
      transform: rotate3d(1, -1, 0, 70deg);
  }
  </code></pre>