JSFiddle - React, Tailwind, and code Playground

by dbugger

HTML

<div class="card">
    <div class="side sideA">
        <img src="http://lorempixel.com/output/transport-q-c-300-150-8.jpg" />
        <div class="dark">Smart</div>
        <div class="light">Actually a little dumb</div>
    </div>
    <div class="side sideB">
        <div class="dark">Mindblow!!!</div>
    </div>
</div>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

CSS

.card{
    width: 320px;
    height: 200px;
    margin: 20px;
    position: relative;
    font-family: Helvetica, sans-serif;
}
.side{
    background: #ddd;
    padding: 10px 10px 40px 10px;

  -webkit-transition: box-shadow 0.1s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: box-shadow 0.1s ease-out;  /* FF4+ */
       -o-transition: box-shadow 0.1s ease-out;  /* Opera 10.5+ */
          transition: box-shadow 0.1s ease-out;

}
.sideB{
    background-color: #dd3300;
}
.dark{
    color: transparent;
    text-shadow: 0px 0px 0px #222;
    font-weight: bold;

  -webkit-transition: text-shadow 0.1s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: text-shadow 0.1s ease-out;  /* FF4+ */
       -o-transition: text-shadow 0.1s ease-out;  /* Opera 10.5+ */
          transition: text-shadow 0.1s ease-out;
}
.light{
    color: transparent;
    text-shadow: 0px 0px 0px #888;

  -webkit-transition: text-shadow 0.1s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: text-shadow 0.1s ease-out;  /* FF4+ */
       -o-transition: text-shadow 0.1s ease-out;  /* Opera 10.5+ */
          transition: text-shadow 0.1s ease-out;
}
.side{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    -webkit-backface-visibility: hidden;
}
.rotating .dark{
    color: transparent;
    text-shadow: 0px 0px 3px #222;
}
.rotating .light{
    color: transparent;
    text-shadow: 0px 0px 3px #888;
}
.rotated .dark{
    color: transparent;
    text-shadow: 0px 0px 0px #222;
}
.rotated .light{
    color: transparent;
    text-shadow: 0px 0px 0px #888;
}
.rotating{
}
.rotated{
}

JavaScript

var speed = 700;
$(".sideB").css({
    perspective: '1000px',
    rotateY: '180deg'
});

$(".card").hover(function(){
        
        $(".sideA", this).addClass("rotating").removeClass("rotated").transition({
            perspective: '1000px',
            rotateY: '180deg'
        },speed, function(){
            $(this).addClass("rotated").removeClass("rotating");
        });
        $(".sideB", this).addClass("rotating").removeClass("rotated").transition({
            perspective: '1000px',
            rotateY: '360deg'
        },speed, function(){
            $(this).addClass("rotated").removeClass("rotating");
        });
    }, function(){
        $(".sideA", this).addClass("rotating").removeClass("rotated").transition({
            perspective: '1000px',
            rotateY: '0deg'
        },speed, function(){
            $(this).addClass("rotated").removeClass("rotating");
        });
        $(".sideB", this).addClass("rotating").removeClass("rotated").transition({
            perspective: '1000px',
            rotateY: '180deg'
        },speed, function(){
            $(this).addClass("rotated").removeClass("rotating");
        });
    }
);