JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<div id="wrap" class="BG">
    <div id="one" class="BG transit">Div One
        <div class="clickArea">
            <div class="fixed"></div>
        </div>                                            
    </div>
    <div id="two" class="BG transit back">Div Two
        <div class="clickArea">
            <div class="fixed"></div>
        </div>                                       
    </div>
</div>

CSS

.BG{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

#wrap{
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    float:left;
}

#one {
    background-color:green;
    overflow:hidden;
}

#two{
    background-color:pink;
    overflow:hidden;
}

.transit {
    -o-transition: -o-transform 0.7s ease-in-out;
    -ms-transition: -ms-transform 0.7s ease-in-out;
    -moz-transition: -moz-transform 0.7s ease-in-out;
    -webkit-transition: -webkit-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
}

.back{
    -moz-transform: rotateY(-180deg) translateZ(-1px);
    -webkit-transform: rotateY(-180deg) translateZ(-1px);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}


.clickArea{
    width:50px;
    background-color:yellow;
    right:0;
    top:0;
    position:absolute;
    height:100%;
    z-index:400;
}

.fixed{
    position:fixed;
    width:20px;
    height:100%;
    top:0;
    background-color:red;
    right:-20px;
    
}

.flipY #one {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.flipY #two {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
}

JavaScript

$(".clickArea").mouseover(function(){
    $(this).find(".fixed").animate({right : "0px"},500);
    alert($(this).parent().attr("id"));
});

$(".clickArea").mouseleave(function(){
    $(this).find(".fixed").animate({right : "-20px"},500);
});

$("#one").click(function(){
    $("#wrap").addClass("flipY");
});

$("#two").click(function(){
    $("#wrap").removeClass("flipY");
});