JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="wrapper">
    <div class="flip">
        <div class="card front">1</div>
        <div class="card back">2</div>
    </div>
    <div class="card upper">2</div>
    <div class="card lower">1</div>
</div>

CSS

* {
    box-sizing: border-box;
}
.wrapper{
    display: inline-block;
    width: 80px;
    height: 100px;
}
.flip {
    position: absolute;
    width: 80px;
    height: 50px;
}
.flip .back, .flip .front{
    position: absolute;
    background: green;
}
.card{
    width: 80px;
    height: 50px;
    background: orange;
    text-align: center;
    font-size: 100px;
    overflow: hidden;
}
.lower{
    background: skyblue;
}
body {
    text-align:center;
}
div{
    margin :0;
    padding: 0;
}

JavaScript

$('.flip').css({
    transformOrigin: '50% 100%',
    perspective: '100px'
});
$(".flip, .card").css({
    backfaceVisibility: "hidden"
});
$(".flip .front").css({
    rotateX: '0deg'
})
$(".flip .back").css({
    rotateX: '180deg'
});
$(".wrapper").hover(function () {
    $(".flip").stop().transition({
        rotateX: '-180deg'
    }).toggleClass("down");
}, function () {
    $(".flip").stop().transition({
        rotateX: '0deg'
    }).toggleClass("down");
});