JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div id='a'><h1>Some header</h1></div>
<div id='b' style='position: absolute; top: 50px; right: 50px;background: white; color: black; font-family: helvetica; font-size: 0.8em;padding: 5px;'>Back</div>
<div id='c' style='position: absolute; top: 150px; right: 50px;background: white; color: black; font-family: helvetica; font-size: 0.8em;padding: 5px;'>Forwards</div>

CSS

body {
    padding: 50px;
    background: #fff;
    -webkit-perspective: 2000;
}
#a {
    width: 300px;
    height: 400px;
    background: white;
    -webkit-transition: all .5s ease-out;
    -webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
-webkit-transform: scale(1) rotateX(0deg) rotateY(0deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(0px);
}
#a.go {
    -webkit-transition: all .5s ease-in;
    -webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
    -webkit-transform: scale(1) rotateX(0deg) rotateY(93deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(0px);
    background: #efefef;

}
#a.go-back {
    -webkit-transition: all .5s ease-in;
    -webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
    -webkit-transform: scale(1) rotateX(0deg) rotateY(-85deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(0px);
background: #efefef;
}
#a.a {
    -webkit-transition: all 0s ease-in;
    -webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
    -webkit-transform: scale(1) rotateX(0deg) rotateY(-87deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(0px);    background: #efefef;

}
#a.b {
    -webkit-transition: all 0s ease-in;
    -webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
    -webkit-transform: scale(1) rotateX(0deg) rotateY(95deg) translate(0px, 0px) skew(0deg, 0deg) scaleZ(1) rotateZ(0deg) translateZ(0px);    background: #efefef;

}

JavaScript

(function($){
    $('#b').click(function() {
        $('#a').addClass('go-back');
        setTimeout(function(){
            $('#a').html('<h1>SOMETHING ELSE ENTIRELY</h1>').addClass('b').removeClass('go-back');
            setTimeout(function(){
                $('#a').removeClass('b go-back');
            }, 0);
        }, 500);
    });
    $('#c').click(function() {
        $('#a').addClass('go');
        setTimeout(function(){
            $('#a').html('<h1>SOMETHING ELSE</h1>').addClass('a').removeClass('go');
            setTimeout(function(){
                $('#a').removeClass('a go');
            }, 0);
        }, 500);
    });
}(jQuery));