title: css 3 cube flip transforms - on page transition - using twitter bootstrap
body: <p>PROBLEM STATEMENT</p>
  
  <p>I was inspired by the cube flip transforms presented <a href="http://desandro.github.com/3dtransforms/docs/cube.html" rel="nofollow">here</a></p>
  
  <p>I figured it would be great to have such transitions when I redirect the user from one page to another.</p>
  
  <p>Then on inspecting the HTML I found out that it was an effect carried out on stacked divs.</p>
  
  <p>I managed to replicate this at <a href="http://jsfiddle.net/celestialcitizen/WpxX3/14/" rel="nofollow">http://jsfiddle.net/celestialcitizen/WpxX3/14/</a></p>
  
  <p>Now my site is designed with Twitter Bootstrap. So I decided to stack the various pages of my site as divs within a single page. I have a failed attempt up at <a href="http://jsfiddle.net/celestialcitizen/Rt4eR/4/" rel="nofollow">http://jsfiddle.net/celestialcitizen/Rt4eR/4/</a></p>
  
  <ol>
  <li><p>Can anyone help me correct it ?</p></li>
  <li><p>When I do these transforms can I still ensure that elements within a page / div are clickable ?</p></li>
  </ol>
  
  <p>EDIT:</p>
  
  <p>These JS Fiddles must be viewed on safari and Firefox 15.0.1</p>