JSFiddle - React, Tailwind, and code Playground

by cwolves

HTML

<div class="wrapper">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="img img3"></div>
    <div class="img img4"></div>
    <div class="img img5"></div>
    <div class="img img6"></div>
    <div class="img img7"></div>
    <div class="img img8"></div>
    <div class="img img9"></div>
</div>

CSS

.wrapper {
    -webkit-perspective     : 800;
    -webkit-transform-style : preserve-3d;
    -webkit-transform-origin: 155 155 0;
}

.img {
    width    : 100px;
    height   : 100px;
    position : absolute;
    border   : 1px solid #000;
    -webkit-transform-origin: 0px 155px 155px;
}

.img1 { top : 0px;   left : 110px; }
.img2 { top : 0px;   left : 220px; }
.img3 { top : 0px;   left : 330px; }
.img4 { top : 110px; left : 110px; }
.img5 { top : 110px; left : 220px; }
.img6 { top : 110px; left : 330px; }
.img7 { top : 220px; left : 110px; }
.img8 { top : 220px; left : 220px; }
.img9 { top : 220px; left : 330px; }

.img1, .img4, .img7 { -webkit-transform : perspective(5000px) rotateY(30deg);  } 
.img2, .img5, .img8 { -webkit-transform : perspective(5000px) rotateY(0deg);   } 
.img3, .img6, .img9 { -webkit-transform : perspective(5000px) rotateY(-30deg); }