html5 css 3d transforms and div stacking like an accordion -

i stack divs in vertical stack above each other, , apply css3 3d transforms 'fold' them in slightly, however, when try this, can transform divs rotate on x axis, after rotation there gap between each of divs because divs not collapse in on each other, can achieved?

as example: http://www.papercraftsforchildren.com/wp-content/uploads/2010/04/garland2.jpg image shows after (although horizontal, not vertical).

i hope makes sense.

edit: here code (work in progress):

.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) } 

and html

<div id="frame2" style="padding-left: 200px"> <div class="stripcontainer">     <div class="edge_a">         <div class="edge_a_d" style="width:20px; height: 50px; background-color: red"></div>         <div class="edge_a_c" style="width:20px; height: 30px; background-color: blue"></div>         <div class="edge_a_b" style="width:20px; height: 30px; background-color: green"></div>         <div class="edge_a_a" style="width:20px; height: 150px; background-color: orange"></div>     </div>     <div class="edge_b">         <div class="edge_b_d" style="width:20px; height: 50px; background-color: red"></div>         <div class="edge_b_c" style="width:20px; height: 30px; background-color: blue"></div>         <div class="edge_b_b" style="width:20px; height: 30px; background-color: green"></div>         <div class="edge_b_a" style="width:20px; height: 150px; background-color: orange"></div>     </div>     <div class="edge_c">         <div class="edge_c_d" style="width:20px; height: 50px; background-color: red"></div>         <div class="edge_c_c" style="width:20px; height: 30px; background-color: blue"></div>         <div class="edge_c_b" style="width:20px; height: 30px; background-color: green"></div>         <div class="edge_c_a" style="width:20px; height: 150px; background-color: orange"></div>     </div>     <div class="edge_d">         <div class="edge_d_d" style="width:20px; height: 50px; background-color: red"></div>         <div class="edge_d_c" style="width:20px; height: 30px; background-color: blue"></div>         <div class="edge_d_b" style="width:20px; height: 30px; background-color: green"></div>         <div class="edge_d_a" style="width:20px; height: 150px; background-color: orange"></div>     </div> </div> </div> 

check out below resources resemble effect want per image.

http://oridomi.com/#example-reveal

http://oridomi.com/#example-stairs

http://oridomi.com/#example-accordion

you have click , drag on elements present in scene effect.

http://photon.attasi.com/ - 1 more resembles desired effect.

hope helps.