JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<div class="hover panel">
        <div class="front">
            <div class="pad">
                <img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-front.png" alt="logo front" />
            </div>
        </div>
        <div class="back">
            <div class="pad">
                <img src="http://simonlockyer.info/wp-content/themes/DOD_BLANK/images/logo-back.png" alt="logo back" />
            </div>
        </div>
    </div>

CSS

.panel {
            margin: 0 auto;
            width: 130px;
            height: 130px;  
            position: relative;
            font-size: .8em;
            -webkit-perspective: 600px;
            -moz-perspective: 600px;
        }
        /* -- make sure to declare a default for every property that you want animated -- */
        /* -- general styles, including Y axis rotation -- */
        .panel .front {
            position: absolute;
            top: 0;
            z-index: 900;
            width: inherit;
            height: inherit;
            text-align: center;
            -webkit-transform: rotateX(0deg) rotateY(0deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            -moz-transform: rotateX(0deg) rotateY(0deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;
            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
            -moz-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }
        .panel.flip .front {
            z-index: 900;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
        }
        .panel .back {
            position: absolute;
            top: 0;
            z-index: 800;
            width: inherit;
            height: inherit;
            -webkit-transform: rotateY(-180deg);
            -webkit-transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
 
            -moz-transform: rotateY(-180deg);
            -moz-transform-style: preserve-3d;
            -moz-backface-visibility: hidden;
            /* -- transition is the magic sauce for animation -- */
            -o-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
         ...

JavaScript

$(document).ready(function(){
            // set up hover panels
            // although this can be done without JavaScript, we've attached these events
            // because it causes the hover to be triggered when the element is tapped on a touch device
            $('.hover').hover(function(){
                $(this).addClass('flip');
            },function(){
                $(this).removeClass('flip');
            });
        });