title: html5 css 3d transforms and div stacking like an accordion
body: <p>I would like to stack divs in a vertical stack above each other, and apply some css3 3d transforms to 'fold' them in slightly, however, when I try to do this, I can transform the divs to rotate on their X axis, but after the rotation there is a gap between each of the divs because the divs do not collapse in on each other, can this be achieved?</p>
  
  <p>As an example: <a href="http://www.papercraftsforchildren.com/wp-content/uploads/2010/04/garland2.jpg" rel="nofollow">http://www.papercraftsforchildren.com/wp-content/uploads/2010/04/garland2.jpg</a> this image shows something I am after (although this is horizontal, not vertical).</p>
  
  <p>I hope that makes sense.</p>
  
  <p>EDIT: Here is some code (work in progress):</p>
  
  <pre><code>.stripContainer {
      width: 80px;
      -webkit-transform-style: preserve-3d;
      -webkit-animation: spin 10s infinite linear;
  }
  
  .edge_a {
      float: left;
      width: 20px;
      -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
  }
  
  .edge_b {
      float: left;
      width: 20px;
      -webkit-transform: rotateX(0deg) rotateY(15deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
  }
  
  .edge_c {
      float: left;
      width: 20px;
      -webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
  }
  
  .edge_d {
      float: left;
      width: 20px;
      -webkit-transform: rotateX(0deg) rotateY(45deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
  }
  
  .edge_a_b {
      -webkit-transform-origin: bottom center 0;
      -webkit-transform: rotateX(95deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  }
  
  .edge_b_b {
      -webkit-transform-origin: bottom center 0;
      -webkit-transform: rotateX(95deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  }
  
  #frame2 {
      perspective: 900;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
  }
  </code></pre>
  
  <p>and the HTML</p>
  
  <pre><code>&lt;div id="frame2" style="padding-left: 200px"&gt;
  &lt;div class="stripContainer"&gt;
      &lt;div class="edge_a"&gt;
          &lt;div class="edge_a_d" style="width:20px; height: 50px; background-color: red"&gt;&lt;/div&gt;
          &lt;div class="edge_a_c" style="width:20px; height: 30px; background-color: blue"&gt;&lt;/div&gt;
          &lt;div class="edge_a_b" style="width:20px; height: 30px; background-color: green"&gt;&lt;/div&gt;
          &lt;div class="edge_a_a" style="width:20px; height: 150px; background-color: orange"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="edge_b"&gt;
          &lt;div class="edge_b_d" style="width:20px; height: 50px; background-color: red"&gt;&lt;/div&gt;
          &lt;div class="edge_b_c" style="width:20px; height: 30px; background-color: blue"&gt;&lt;/div&gt;
          &lt;div class="edge_b_b" style="width:20px; height: 30px; background-color: green"&gt;&lt;/div&gt;
          &lt;div class="edge_b_a" style="width:20px; height: 150px; background-color: orange"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="edge_c"&gt;
          &lt;div class="edge_c_d" style="width:20px; height: 50px; background-color: red"&gt;&lt;/div&gt;
          &lt;div class="edge_c_c" style="width:20px; height: 30px; background-color: blue"&gt;&lt;/div&gt;
          &lt;div class="edge_c_b" style="width:20px; height: 30px; background-color: green"&gt;&lt;/div&gt;
          &lt;div class="edge_c_a" style="width:20px; height: 150px; background-color: orange"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="edge_d"&gt;
          &lt;div class="edge_d_d" style="width:20px; height: 50px; background-color: red"&gt;&lt;/div&gt;
          &lt;div class="edge_d_c" style="width:20px; height: 30px; background-color: blue"&gt;&lt;/div&gt;
          &lt;div class="edge_d_b" style="width:20px; height: 30px; background-color: green"&gt;&lt;/div&gt;
          &lt;div class="edge_d_a" style="width:20px; height: 150px; background-color: orange"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>