JSFiddle - React, Tailwind, and code Playground

by jjordanca

HTML

<ul id="email">
    <li>
        <div class="green" style="width:180px;height:180px;background-color:green"></div>
        <div class="red" style="width:250px;height:200px;margin-left:5px;background-color:red"></div>
    </li>
</ul>

CSS

#email {
    list-style:none;
    margin:100px 0;
    height:550px;
}

#email li{
    display: block;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    position: relative;
    width: 100%;
    height: 100%;
    -moz-transform-origin: 25% 50%;
    -webkit-transform-origin: 25% 50%;
}

#email:hover .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(100px,0,175px);
    -moz-transform: translate3d(100px,0,175px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
    z-index: 2;
}

#email:hover .red {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, -175px);
    -moz-transform: translate3d(0, 0, -175px);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
    z-index: 1;
}

#email li div {
    display: block;
    position: absolute;
    -moz-box-shadow:0 3px 10px #888;
    -webkit-box-shadow:0 3px 10px #888;
}

#email li .green {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(50px, -50px, -50px);
    -moz-transform: translate3d(50px, -50px, -50px);
    z-index: 1;
}

#email li .red {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform: translate3d(150px, 50px, 50px);
    -moz-transform: translate3d(150px, 50px, 50px);
    z-index: 2;
}