JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/plugins/EaselPlugin.min.js"></script>
<div class="container">
    <div class="per1">aaa</div>
    <div class="per">aaa</div>
</div>

CSS

.container {
    width: 200px;
    height: 100px;
}

.per, .per1 {
    position:absolute;
    background:#000;
    width:200px;
    color:#fff;
    height: 100px;
    perspective: 200px;
    cursor: pointer;
}
.per1 { background: red;  }

JavaScript

$(function() {
    var container = $(".container");
    var elem = $(".per");
    var elem2 = $(".per1");
    TweenMax.to(elem2, 0, {rotationX:90, transformOrigin:"top 200px"});
    $(container).hover(function(){
        TweenMax.to(elem, 0.3, {rotationX:-90, transformOrigin:"top 0px", "top":"50px"});
        TweenMax.to(elem2, 0.3, {rotationX:0, transformOrigin:"top 200px"});
    },function(){
        TweenMax.to(elem, 0.3, {rotationX:0, transformOrigin:"top 0px", "top":"0px"});
        TweenMax.to(elem2, 0.3, {rotationX:90, transformOrigin:"top 200px"});
    });
});