CSS rotateY - Vertical stack

Possible animation for opening and closing menus

by Ben Clayton

HTML

<h1>Flipper</h1> 
<section id="options">
    <button id="open">Open</button>
    <br/>
    <button id="close">Close</button>
    <br/>
</section>
<div class="cardset"></div>

CSS

.container {
       width: 400px;
       height: 25px;
       position: relative;
       margin:2px;
       -webkit-perspective: 800px;
       -moz-perspective: 800px;
       -o-perspective: 800px;
       perspective: 800px;
       /*display:inline-block;*/
   }
   .cardset {
       position:absolute;
       top:40px;
       left:200px;
   }
   figure {
       margin:0;
   }
   .cards {
       width: 100%;
       height: 100%;
       position: absolute;
       -webkit-transition: -webkit-transform 2s;
       -moz-transition: -moz-transform 2s;
       -o-transition: -o-transform 2s;
       transition: transform 2s;
       -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
       transform-style: preserve-3d;
   }
   .cards.halfflip {
       -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
       -o-transform: rotateX(90deg);
       transform: rotateX(90deg);
   }
   .cards.flipped {
       -webkit-transform: rotateX(180deg);
       -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
       transform: rotateX(180deg);
   }
   .container.twists {
       height:0px;
   }
   .cards.twist {
       -webkit-transform: rotateX(990deg);
       -moz-transform: rotateX(990deg);
       -o-transform: rotateX(990deg);
       transform: rotateX(990deg);
   }
   .cards figure {
       display: block;
       height: 100%;
       width: 100%;
       line-height: 24px;
       color: white;
       top:0;
       left:0;
       text-align: center;
       font-weight: bold;
       font-size: 12px;
       position: absolute;
       -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
       backface-visibility: hidden;
   }
   .cards .front {
       background: #FF0000;
   }
   .cards .back {
       background: #CC1111;
       -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
      ...

JavaScript

var g = 0,
    d = 0;
var state = '';
$('#open').on('click', function () {
    g = 0;
    d = 1;
    state = 'twist';
    anim();
});
$('#close').on('click', function () {
    g = 9;
    d = -1;
    state = 'twist';
    anim();
});


function anim() {
    if (d == 1) {
        $('#card' + g).removeClass(state).parent().slideDown();
    } else {
        $('#card' + g).addClass(state).parent().slideUp();
    }
    g += d;
    if ($('#card' + g).length) {
        setTimeout(anim, 50);
    }
}


for (var x = 0; x < 10; x++) {

    var s = '<section class="container">' +
        '<div id="card' + x + '" class="cards">' +
        '  <figure class="front">' + x + '</figure>' +
        '  <figure class="back">X</figure>' +
        '</div>' +
        '</section>';
    $(".cardset").append(s);
}