JSFiddle - React, Tailwind, and code Playground

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;
}
 
.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=false,deg=0;
    (!interval)?interval=setInterval(()=>rotate(direction),speed):'';
    
    window.addEventListener('blur',()=>{
        if(interval){
            clearInterval(interval),
            interval=false
        }
    },false);
    window.addEventListener('focus',()=>
        (!interval)?interval=setInterval(()=>rotate(direction),speed):''
    ,false);

    document.getElementsByClassName('next')[0].addEventListener('click',()=>
        rotate("next")
    ,false);
    document.getElementsByClassName('prev')[0].addEventListener('click',()=>
        rotate("prev")
    ,false);

    var carousel = document.getElementsByClassName('carousel')[0];

    function rotate(x){
        (x=="next")?deg-=60:deg+=60;
        carousel.style =
            "transform : rotateY("+deg+"deg);"+
            "transition : 1s;"
            
        ;
        if(deg == -360){    // вот тут не пойму как правильно сделать
            deg = 0;
            carousel.style =
                "transform : rotateY("+deg+"deg);"+
                "transition : 0s;"
            ;
        }
    }
}