JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="container">
    <div class="carousel">
        <div class="item a"></div>
        <div class="item b"></div>
        <div class="item c"></div>
        <div class="item d"></div>
        <div class="item e"></div>
        <div class="item f"></div>
    </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}

body {
    background: #333;
    padding: 70px 0;
    font: 15px/20px Arial, sans-serif;
}

.container {
    margin: 0 auto;
    width: 250px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.carousel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.item {
    display: block;
    position: absolute;
    background: #000;
    width: 250px;
    height: 200px;
    line-height: 200px;
    font-size: 5em;
    text-align: center;
    color: #FFF;
    opacity: 0.95;
    border-radius: 10px;
}

.a {
    transform: rotateY(0deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/363000/362381/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -50px;
}
.b {
    transform: rotateY(60deg) translateZ(250px);
    background-image: url(https://d37ta6l1gshlok.cloudfront.net/photo/7529/2747529-3c1c3ec201767d35a8fce728dca3f359-0-preview.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -50px;
}
.c {
    transform: rotateY(120deg) translateZ(250px);
    background-image: url(https://img-android.lisisoft.com/imgmic/6/7/2576-i-nanjing.myring.SMSRingtone.jpg);
    background-repeat: no-repeat;
    background-size: 280px;
    background-position: -20px -50px;
}
.d {
    transform: rotateY(180deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/321000/320709/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position: 0px -40px;
}
.e {
    transform: rotateY(240deg) translateZ(250px);
    background-image: url(http://img2.1001golos.ru/ratings/319000/318193/pic1.jpg);
    background-repeat: no-repeat;
    background-size: 260px;
    background-position: 0px -20px;
}
.f {
    transform: rotateY(300deg) translateZ(250px);
    background-image:...

JavaScript

autoCarousel3D("next",1000);

function autoCarousel3D(direction,speed) {
    var interval = setInterval(function(){ rotate(direction); },speed),deg=0;

    $(window).on("blur",function(){clearInterval(interval);});
    $(window).on("focus",function(){interval=setInterval(function(){ rotate(direction); },speed);});

    $(".next").on("click", function(){rotate("next")});
    $(".prev").on("click", function(){rotate("prev")});

    function rotate(x){
        if(x=="next"){ deg-=60; } if(x=="prev"){ deg+=60; }
        $(".carousel").css({
            "-webkit-transform": "rotateY("+deg+"deg)",
            "-moz-transform": "rotateY("+deg+"deg)",
            "-o-transform": "rotateY("+deg+"deg)",
            "transform": "rotateY("+deg+"deg)"
        });
    }
}