JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div>
    <span class="left">
        <i></i>
    </span>
    <span class="right">
        <i></i>
    </span>
</div>

CSS

div {
   
   position: relative;
    border:1px solid #fc0;
    //top: 100px;
    //left: 100px;
    //width: 800px;
    height: 500px;
    -webkit-perspective: 600px;
    overflow: hidden;
}
span {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -250px;
    left: 0;
    width: 500px;
    height: 500px;
    background: #ccc;
    -webkit-transform: rotateY( 80deg );
    opacity: .5;
    transform-style: preserve-3d;
}
span.right {
    left: auto;
    right: 0;
    -webkit-transform: rotateY( -80deg );
}
i {
    display: block;
    width: 20px;
    height: 20px;
    background: #333;
    position:absolute;
    right: 50%;
    top: 50%;
}
span.right i {
    left: 50%;
    right: auto;
}