title: How can I style the backface of a rotated element?
body: <p>I have a <code>figure</code> which is rotatable (to any degree via user input) this rotation visibly rotates using the <code>transition</code> property. When this element is rotated by more than 90deg/-90deg the backface of the element is visible. I'm wanting to style this usually-hidden side of the element differently to how the front side is styled, but I'm not sure how this can be achieved.</p>
  
  <pre class="lang-css prettyprint-override"><code>figure {
      background:#fff;
      color:#000;
      border:1px solid #000;
      transition:1s;
  }
  
  figure:hover {
      transform:rotateY(180deg);
  }
  </code></pre>
  
  <h3>Current Style (Browser Default):</h3>
  
  <p><img src="https://i.stack.imgur.com/LAG8Y.png" alt="Current example"></p>
  
  <h3>Desired Style:</h3>
  
  <p><img src="https://i.stack.imgur.com/SAirH.png" alt="Desired example"></p>
  
  <p>Is there any way I can style the backface of an element differently to the front?</p>
  
  <p>Here is a basic JSFiddle demo of this rotation (on hover): <a href="http://jsfiddle.net/Y89t3/" rel="noreferrer">http://jsfiddle.net/Y89t3/</a></p>