Is there a way to stack divs vertically above each other and use CSS3 3D transforms to create a folding effect between them? I've tried rotating the divs on their X axis, but it leaves gaps between each div because they don't collapse into each other. Can this be achieved?
For reference, something similar to this image (although horizontal, not vertical):
I hope that explanation makes sense.
Here is some code I'm working on:
.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)
}
// More CSS code here
And here's the corresponding HTML:
<div id="frame2" style="padding-left: 200px">
<div class="stripContainer">
// HTML content with nested divs displaying various colors set in respective heights
</div>
</div>