JSFiddle - React, Tailwind, and code Playground

HTML

<div class="perspective"><div class="square">the square</div></div>

CSS

.perspective{
    -webkit-perspective : 800px
}
.square{
    -webkit-transform-origin: center center;
    -webkit-transition: all 1s ease;
    width:100px;
    height:100px;
    background:#AAA;
}
.square:hover{
    -webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);
}