css using perspective for transforms

HTML

<div class='perspective-wrap'>
<div class='perspective'>
<div class='perspective-inner'>
<div class='demo-box'>
Hi...
</div>
</div>
</div>
</div>

CSS

.perspective-wrap {
height:400px;
width:400px;
}
.demo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    margin-left: 21%;
    margin-top: 80px;
    background: #444;
    border-radius: 3px;
    height: 300px;
    width: 300px;
    box-shadow: 0px 5px 15px #464646;
}
.perspective-inner {
opacity: 1;
transition: opacity .6s ease-in-out;
transition: .3s;
transform: rotateY(30deg);
}
.perspective:hover .perspective-inner {
transform: rotateY(0deg);
}
.perspective {
  perspective: 200px;
  margin: auto 0;
  width: 400px;
}