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">Следующий</div>
<div class="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: url(http://www.tuning.bg/public/upload/news/4488/300x300/New-Aston-Martin-Vanquish-12.jpg);
	background-repeat:...

JavaScript

var interval = setInterval(function(){ rotate("next"); },3000);		// тут можно поменять next на prev и время МС
var carousel = $(".carousel"), currdeg  = 0;

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

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