title: How to rotate a square shaped element over its diagonal axis with CSS?
body: <p>Given a square, how can I rotate it such as the element flips with its diagonal being the origin of rotation? I managed to flip it using:</p>
  
  <pre><code>-webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);
  </code></pre>
  
  <p>you can see an example <a href="http://jsfiddle.net/ewGWj/1/" rel="nofollow">here</a></p>
  
  <p>but this does not rotate on the diagonal axis. How can I achieve that? Basically what I am trying to achieve is that when the element rotates, its top right corner, and bottom left corner don't go out of place.. Thanks and sorry for my bad English/explanation :S!</p>