JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="flip-wrap flip-x">
    <div class="flip">
        <div class="image">
            <img src="http://lorempixel.com/300/300/city" />
        </div>
        <div class="content">
            some content here
        </div>
    </div>
</div>
<div class="flip-wrap flip-y">
    <div class="flip">
        <div class="image">
            <img src="http://lorempixel.com/300/300/nature" />
        </div>
        <div class="content">
            some content here
        </div>
    </div>
</div>

SCSS

.flip-wrap{
    perspective: 500px;
    float: left;
    width: 300px;
    .flip{
        float: left;
        width: 300px;
        backface-visibility: visible;
        transition: transform 600ms;
        transform-style: preserve-3d;
        transform-origin: center center;
        position: relative;
        transform: rotateY(0deg);
        font-size: 0;
        .image{
            backface-visibility: hidden;
        }
        .content{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #353535;
            color: #fff;
            padding: 15px;
            font-size: 16px;
            transform-style: preserve-3d;
            transform: rotateY(180deg);
            transform-origin: center center;
            backface-visibility: hidden;
        }
    }
    &.flip-x{
        .flip{
            transform: rotateY(0deg);
        }
        &.active{
            .flip{
                transform: rotateY(180deg);
            }
        }
        .flip .content{
            transform: rotateY(180deg);
        }
    }
    &.flip-y{
        .flip{
            transform: rotateX(0deg);
        }
        &.active{
            .flip{
                transform: rotateX(180deg);
            }
        }
        .flip .content{
            transform: rotateX(180deg);
        }
    }
}

body{
    padding: 50px;
    font-family: sans-serif;
}

JavaScript

/**
 * 3D Hover Example
 */

$('.flip-wrap').each(function(){
    $(this).click(function(){
        var enable = false;
        if(!$(this).hasClass('active')){
            enable = true;
        }
        $('.flip-wrap.active').each(function(){
            $(this).removeClass('active');
        });
        if(enable){
            $(this).addClass('active');
        }
    });
});