CODEWITHSUNDEEP
htmlcsstransform
Mark
Mark

Reputation: 14950

html5 css 3d transforms and div stacking like an accordion

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?

As an example: http://www.papercraftsforchildren.com/wp-content/uploads/2010/04/garland2.jpg this image shows something I am after (although this is horizontal, not vertical).

I hope that makes sense.

EDIT: Here is some 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 the 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>

Upvotes: 0

Views: 2859

Answers (1)

Nitesh
Nitesh

Reputation: 15779

Check out the below resources which resemble the effect that you want as per your image.

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

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

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

You have to click and drag on the elements present in the scene to get your effect.

http://photon.attasi.com/ - One more that resembles your desired effect.

Hope this helps.

Upvotes: 1

Related Questions