JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div class="test1">
    <span></span>
</div>

<span class="test"></span>

CSS

div.test {
    width: 100px;
    height: 100px;
    -webkit-perspective: 10px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}
div.test span {
    display: block;
    width: 150px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    background: #c00;
    -webkit-transform: rotateY( -45deg );
}

span.test {
    display: block;
    width: 150px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    background: #00c;
    -webkit-transform: perspective(4px) rotateY(-3deg)
}