JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class=cube-3d>
    <span>Front</span>
    <span>Bottom</span>
</div>

CSS

body { font: 16px/20px sans-serif; color: #fff; }
div {
    width: 400px;
    height: 200px;
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.5s ease;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -100px;
}
div:hover {
    -webkit-transform: rotateX(90deg);
}
span {
    background-color: blue;
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 5px;
    -webkit-backface-visibility: hidden;
}
span:last-child {
    background-color: navy;
    -webkit-transform: rotateX(-90deg) translate3d(0,50%,100px);
}