JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
This is <div>
     <h3 class="front">front</h3>
     <h3 class="back">back</h3>
</div>. And more text behind it.

CSS

*{
    font-family:"Arial";
    font-size: 50px;
    font-weight: bold;
}
h3 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #ff4056;
    cursor: pointer;
}
div {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 50px;
    margin: 0;
    padding: 0;
}
.front {
    z-index: 2;
}


body > *{
    vertical-align: text-bottom;
}
body{
    /* Via ThePatternLibrary.com */ 
    background: url('http://thepatternlibrary.com/img/b.jpg');
    color: #FFF;
}

JavaScript

//Look ma, no prefixes!
$(".back").css({
    rotateX: '-180deg'
});
$("div").css({
    transformStyle: "preserve-3d",
    perspective: '150px',
    rotateX: 0,
    width: $(".front").width(),
    height: $(".front").height()
});
$("h3").css({
    backfaceVisibility: "hidden",
    perspective: '150px'
});

var words = [
    "useful", "interesting", "lorem", "ipsum",
    "stack", "overflow", "easter", "eggs"],
    angle = 0;

setInterval(function (){
    angle -= 180;
    $('div').transition({
        rotateX: '-=180deg'
    }, 600);
    
    var currentB = "." + ((angle / 180) % 2 ? "front" : "back"),
        current = "." + ((angle / 180) % 2 ? "back" : "front");
    $(current).html(words[(Math.random() * 8) | 0]);
    $("div").transition({
        width: $(current).width()
    }, 200);
}, 1300);