title: How to achieve a Windows Phone-like "tiled" 3D transformation using CSS3
body: <p>I'm attempting a CSS3 animation effect using a 3D transformation/transition.  I have an HTML container, which is effectively divided up into "tiles" with another layer that sits on top.  What I'd like to do is create a "flip" effect on individual tiles.</p>
  
  <p>Like <a href="http://jsfiddle.net/KwRX7/8/" rel="nofollow">this</a>, except where one of the layers is plain HTML (eg, text).</p>
  
  <pre><code>.sub {
      -webkit-transition: -webkit-transform 0.6s linear;
  }
  .flip {
      -webkit-transform: rotate3d(1,0,0,90deg);
  }​
  </code></pre>
  
  <p>After pondering this for a while, I'm not sure it's even possible.  Here's what I attempted.</p>
  
  <ul>
  <li>Container with some text as the back layer.</li>
  <li>Layer tiles on top; set one tile's opacity to zero, creating a "window".</li>
  <li>Now apply the transformation to the back layer.</li>
  <li>Add a third layer on top, that is the same as the first layer.</li>
  </ul>
  
  <p>This almost works, but not really;  the "window" flips as it should, but of course the top layer is still visible over the window, <a href="http://jsfiddle.net/FpRnn/5/" rel="nofollow">ruining the effect</a>.</p>
  
  <p>Is there any way to accomplish this partial-flip effect?</p>