flip cards

by kidino

HTML

<div id="viewbox">
    <div id="horzcontainer"></div>
</div>
<button id="prevbtn">PREVIOUS</button>
<button id="nextbtn">NEXT</button>
<script type="text/html" id="card-template"><div class= "card"><div class = "front">front</div><div class="back">back</div></div></script>

CSS

body {
    margin: 0px;
    padding: 0px;
}
div {
    box-sizing: border-box;
}
#horzcontainer {
    -webkit-transform-style: preserve-3d;
    position: absolute;
    left: 0px;
}
#viewbox {
    overflow: hidden;
    position: relative;
}
button {
    height: 30px;
    width: 100px;
}
#prevbtn {
    position: absolute;
    left: 10px;
    bottom: 10px;
}
#nextbtn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.card {
    width: 200px;
    height: 300px;
    float: left;
    position: relative;
    -webkit-transform-style: preserve-3d;
    box-shadow: 0px 0px 10px #000;
    border-radius:10px;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.card .front, .card .back {
    border-radius:10px;
    padding: 10px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: inherit;
    -webkit-backface-visibility: hidden;
    width: inherit;
    padding-top: 250px;
}
.card .front {
    -webkit-transform: rotateY(0deg);
    background-color: #f0f;
}
.card .back {
    background-color: #ff0;
    -webkit-transform: rotateY(180deg);
}
.card.flip {
    -webkit-transform: rotateY(-180deg);
}

JavaScript

var flashcards_data = [{
    word: "cat"
}, {
    word: "dog"
}, {
    word: "mouse"
}, {
    word: "hen"
}, {
    word: "bird"
}, {
    word: "fish"
}, {
    word: "squirrel"
}, {
    word: "bat"
}];

var flashcards = shuffle(flashcards_data);
for (var x in flashcards) {
    var y = $('#card-template').html();
    var z = $(y);
    z.find('.front').html(flashcards[x].word + '<br /><button class="readbtn">READ TO ME</button>');
    z.appendTo('#horzcontainer');
}

$('#viewbox').height(window.innerHeight);
$('#viewbox').width(window.innerWidth);

var wscale = window.innerWidth / $('.card').width();
var hscale = window.innerHeight / $('.card').height();

thescale = (hscale < wscale) ? hscale : wscale;
thescale -= 0.1;

console.log(thescale);

$('.card').width($('.card').width() * thescale);
$('.card').height($('.card').height() * thescale);

$('.card .front').css('padding-top', (220 * thescale) + 'px');
$('.card .back').css('padding-top', (220 * thescale) + 'px');
$('.card').css('font-size', (30 * thescale) + 'px');
$('.card').css('border-radius', (10 * thescale) + 'px');
$('.card').css('border-shadow', '0px 0px ' + (10 * thescale) + 'px #000');
$('.card .front').css('border-radius', (10 * thescale) + 'px');
$('.card .back').css('border-radius', (10 * thescale) + 'px');

$('.card').css('margin-left', Math.floor((window.innerWidth - $('.card').width()) / 2) + 'px');
$('.card').css('margin-right', ((window.innerWidth - $('.card').width()) / 2) + 'px');
$('#horzcontainer').height($('.card').height());

$('#horzcontainer').width($('.card').length * window.innerWidth);
$('#horzcontainer').css('margin-top', ((window.innerHeight - $('.card').height()) / 2) + 'px');

$('#viewbox').css('-webkit-perspective', (1000 * thescale) + 'px');


//$('.card').css('-webkit-transform','scale('+thescale+')');



$('.card').on('click',

function () {
    $(this).css('-webkit-transition', '0.6s');
    if ($(this).hasClass('flip')) {
        $(this).removeClass('flip');
    } else {
      ...