JSFiddle - React, Tailwind, and code Playground

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     : 1000;
    -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 : 110px; left : 110px; }
.img3 { top : 220px; left : 110px; }
.img4 { top : 0px;   left : 220px; }
.img5 { top : 110px; left : 220px; }
.img6 { top : 220px; left : 220px; }
.img7 { top : 0px;   left : 330px; }
.img8 { top : 110px; left : 330px; }
.img9 { top : 220px; left : 330px; }

.img1, .img2, .img3 { 
-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;
}

.img4, .img5, .img6 { 
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;
}

.img7, .img8, .img9 { 
-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;
}