JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="slider">
    <div class="container">
        <div class="slide x"></div>
        <div class="slide y"></div>
        <div class="slide z"></div>
    </div>
    <div class="shadow"></div>
</div>

CSS

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    -webkit-perspective: 600px;
    perspective: 600px;
}
.slider * {
    -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
    transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
}
.container {
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
    transform: rotateY(0deg) rotateX(0deg);
}
.slide, .slide:after, .slide:before {
    display: block;
    width: inherit;
    height: inherit;
    background: url('https://d13yacurqjgara.cloudfront.net/users/1607/screenshots/348235/sputtle-t.png');
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-size: cover;
    background-position: center;
}
.slide.x {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
.slide.x:after {
    content:'';
    background-image: url('http://d13yacurqjgara.cloudfront.net/users/29591/screenshots/249071/jellypus.png');
    -webkit-transform: translateZ(100px) rotateZ(-90deg);
    transform: translateZ(100px) rotateZ(-90deg);
}
.slide.x:before {
    content:'';
    background-image: url('http://d13yacurqjgara.cloudfront.net/users/29591/screenshots/252622/lms.png');
    -webkit-transform: translateZ(-100px) rotateZ(-90deg);
    transform: translateZ(-100px) rotateZ(-90deg);
}
.slide.y {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
.slide.y:after {
    content:'';
    background-image: url('http://d13yacurqjgara.cloudfront.net/users/1607/screenshots/451213/skullbot-takes-a-break.jpg');
    -webkit-transform: translateZ(100px) scale(-1);
    transform: translateZ(100px) scale(-1);
}
.slide.y:before {
    content:'';
    background-image:...