JSFiddle - React, Tailwind, and code Playground

by Cristian Marcel

HTML

<button id="btn">flip button</button>    
<div class="signup-viewport">
    <div id="cube" class="cube animation">
        <div class="front">front <a href="">front link</a></div>
        <div class="back">Back</div>
        <div class="left">Left</div>
        <div class="right">Right <a href="">right link</a></div>
        <div class="bottom">Bottom</div>
        <div class="top">Top</div>
    </div>
</div>

CSS

.signup-viewport {
    perspective: 10000000px;
    position: absolute;
    width: 380px;
    height: 380px;
    margin-left: 5%;
    backface-visibility: hidden;
    
}
.cube {
    backface-visibility: hidden;
    overflow: visible;
    width: 380px;
    height: 380px;
    position: relative;
    transform-style: preserve-3D;
    transition: all 1s;
    margin: 0 auto;
    margin-top: 50px;
    
}
button:hover + .viewport > .cube {
    transform: rotateY(90deg);
}
.cube .front, .cube .back, .cube .left, .cube .right, .cube .bottom, .cube .top {
    width: 380px;
    height: 380px;
    position: absolute;

    background: rgb(235, 235, 241);
    border: 1px solid rgb(225, 225, 225);
   perspective: 1000px;
}
.cube .front, .cube .back, .cube .left, .cube .right {
    height: 190px;
    background-image: radial-gradient(gray, lightgray);
    border: 1px solid rgb(225, 225, 225);
    backface-visibility: hidden;
}
.front {
    transform: rotateY(-90deg) translateX(50%) rotateY(90deg);
    height: 190px;
}
.back {
    background: blue;
    transform: rotateY(-90deg) translateX(-50%) rotateY(90deg);
    height: 190px;
}
.left {
    background: yellow;
    transform: translateX(-50%) rotateY(-90deg);
    height: 190px;
}
.right {
    background: green;
    transform: translateX(50%) rotatey(90deg) translateZ(1px);
    height: 190px;
}
.bottom {
    background: pink;
    transform: translateY(0) rotateX(90deg);
}
.top {
    background: lightblue;
    transform: translateY(-50%) rotateX(90deg);
}
.left-animation {
    animation: RotateLeft 1s;
    transform: rotateY(90deg);
}
.right-animation {
    animation: RotateRight 1s;
    transform: rotateY(-90deg);
}
.back-animation {
    animation: RotateBack 1s;
    transform: rotateY(-180deg);
}
@keyframes RotateLeft {
    0% {transform: rotateY(0deg)}
    5% {transform: rotateX(-1deg)}
    100% {transform: rotateY(90deg) rotateX(0deg)}
}
@keyframes RotateRight {
    0% {transform: rotateY(0deg)}
    5% {transform:...

JavaScript

var btn  = document.getElementById("btn");
var cube = document.getElementById("cube");

btn.addEventListener("click", function() {
    cube.classList.add("right-animation");
});