CSS rotateY

by Ben Clayton

HTML

<h1>Flipper</h1> 
<section id="options">
         <button id="flipfront">Front</button>
        <button id="fliphide">Hide</button>
        <button id="flipback">Back</button>
        <button id="fliptwist">Twist</button>
</section>
<div class="cardset">

</div>

CSS

.container {
       width: 50px;
       height: 65px;
       position: relative;
       margin-top:40px;
       border: 1px solid #CCC;
       -webkit-perspective: 800px;
       -moz-perspective: 800px;
       -o-perspective: 800px;
       perspective: 800px;
        display:inline-block;
   }
   figure {
       margin:0;
   }
   .cards {
       width: 100%;
       height: 100%;
       position: absolute;
       -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
       transition: transform 1s;
       -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);
   }
   .cards.twist {
       -webkit-transform: rotateX(180deg);
       -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
       transform: rotateX(180deg);
       -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
       transform: rotateY(180deg);
   }
   .cards figure {
       display: block;
       height: 100%;
       width: 100%;
       line-height: 70px;
       color: white;
       top:0;
       left:0;
       text-align: center;
       font-weight: bold;
       font-size: 50px;
       position: absolute;
       -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
       backface-visibility: hidden;
   }
   .cards .front {
       background: red;
   }
   .cards .back {
       background: blue;
       -webkit-transform:...

JavaScript

$('#flipfront').on('click', function () {
    $('.cards').removeClass('flipped halfflip twist');
});
var g=0;
var state='';
$('#fliphide').on('click', function () {
    g=0;state='halfflip';
    anim();
});
$('#flipback').on('click', function () {
    g=0;state='flipped';
    anim();
});
$('#fliptwist').on('click', function () {
    g=0;state='twist';
    anim();
});


function anim(){
    $('#card'+g).addClass(state);g++;
    if($('#card'+g).length){setTimeout(anim,100);}
}


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