JSFiddle - React, Tailwind, and code Playground

by jjordanca

HTML

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

CSS

#email {
    list-style:none;
    margin:100px 0;
    height:550px;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    position: relative;
}

#email li{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition-property: transform;
    -webkit-transition-duration: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition-property: transform;
    -moz-transition-duration: 0.5s;
    -moz-transform-origin: 25% 50%;
    -webkit-transform-origin: 25% 50%;
}

#email:hover li {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transition-property: transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: transform;
    -moz-transition-duration: 1s;
}

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

#email li div.red {
 z-index: 2;   
}

#email li div.green {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}