JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square">
<p>Some text</p>                        
</div>

CSS

.square {
    width:100px;
    height: 100px;
    background-color:black;
    margin: 50px;
}
p {
    color:white;
    text-align: center;
    padding-top: 35px;
}


.square {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: perspective(1000px) translate3d(0,0,1px);
	transform: perspective(1000px) translate3d(0,0,0);
}

.square:hover {
	-webkit-transform: perspective(100px) translate3d(0,0,1px);
	transform: perspective(100px) translate3d(0,0,31px);
    
}