carousel 3D

by Haelle

HTML

<div class="container">
  <div class="carousel">
    <div class="item a">
      <h5>
        A
      </h5>
      <p>
        lorem ipsum dolore test bla bla
      </p>

    </div>
    <div class="item b">
      B
      <img class="responsive-img" src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1500352854carousel.png">
    </div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

CSS

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;
  width: 250px;
  height: 200px;
  text-align: center;
  color: #FFF;
  opacity: 0.9;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background: red;
}

.b {
  transform: rotateY(60deg) translateZ(250px);
  background: blue;
}

.c {
  transform: rotateY(120deg) translateZ(250px);
  background-image: url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1500352854carousel.png");
  background-size: cover;
  background-position: center;
}

.d {
  transform: rotateY(180deg) translateZ(250px);
  background: purple;
}

.e {
  transform: rotateY(240deg) translateZ(250px);
  background: orange;
}

.f {
  transform: rotateY(300deg) translateZ(250px);
  background: yellow;
}

.next,
.prev {
  position: absolute;
  top: 300px;
  padding: 1em 2em;
  background: #CCC;
  border-radius: 5px;
}

.next {
  right: 5em;
}

.prev {
  left: 5em;
}

.responsive-img {
  width: 100%;
}

JavaScript

"use strict"

class Carousel {
  constructor() {
    this.carousel = $(".carousel")
    this.currentDegree = 0

    this.initEvents()
  }

  initEvents() {
    $(".next").on("click", () => this.rotate("n"))
    $(".prev").on("click", () => this.rotate("p"))
  }

  rotate(direction) {
    this.updateCurrentDegree(direction)
    this.carousel.css({
      "transform": "rotateY(" + this.currentDegree + "deg)"
    })
  }

  updateCurrentDegree(direction) {
    if (direction == "n") {
      this.currentDegree = this.currentDegree - 60
    }
    if (direction == "p") {
      this.currentDegree = this.currentDegree + 60
    }
  }
}

var carousel = new Carousel()