JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="flippable">
    <span class="button">Flip</span>
    <div class="front">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores maxime quasi iusto recusandae mollitia sunt perspiciatis corrupti dolor voluptate incidunt sint vero laborum cupiditate nostrum quam velit cum nam.</p>
    </div>
    <div class="back">
        <h3>The back</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est similique accusamus eius necessitatibus animi modi eum unde sed culpa officiis aliquid aperiam error veniam ratione inventore! Reiciendis ratione fugit soluta.</p>
    </div>
</div>

CSS

body {
    background-color: #eee;
}

.flippable {
    position: relative;
}

.flippable .button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: Georgia;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-bottom-left-radius: 3px;
}

.flippable {
    width: 200px;
    background-color: #fff;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #aaa;
    box-shadow: 0 0 10px #aaa;
}

.flippable .front {
    z-index: 200;
    position: relative;
}

.flippable .back {
    z-index: 100;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0;
}

JavaScript

$(function() {
    $('.flippable .button').click(function() {
        var $box = $(this).closest('.flippable'),
            $front = $box.find('.front'),
            $back = $box.find('.back');
        $box.transition({
            perspective: '500px',
            rotateY: '+=180deg',
            duration: 1000,
        });
        
        $front.transition({
            opacity: 0,
            delay: 500,
            duration: 0,
        });
        $back.transition({
            opacity: 1,
            delay: 500,
            duration: 0,
        });
    });
    
    $('.flippable .back').transition({
        perspective: '500px',
        rotateY: '180deg',
        duration: 0,
    });
});