CSS 3D Carousel Flatmode

css-3d-carousel-flatmode.markdown

CSS 3D Carousel Flatmode

A Pen by Roman Zykov on CodePen.

License.

index.html

<div class="container">
  <div class="carousel">
    <div class="item a ">A</div>
    <div class="item b ">B</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="c_next">Next</div>
<div class="c_prev">Prev</div>
<div class="dots">
  
</div>  

script.js

var carousel = $(".carousel"),
    currdeg  = 0,
    items = 0,
    a = $(".item.a"),
    b = $(".item.b"),
    c = $(".item.c");

var currentDrag = undefined;

$(".c_next").on("click", { d: "n" }, rotate);
$(".c_prev").on("click", { d: "p" }, rotate);
$('.item').on('drag', function(e) {
  console.log(e);
 })
$('.item').on('mauseup', function(e) {
    currentDrag = undefined;
  comsole.log('end drag')
 })

function init() {
  items = carousel.find('.item').length;
  carousel.find('.item:first').addClass('current');
  carousel.find('.item:last').addClass('prev');
  carousel.find('.item.current').next().addClass('next');
  
   for (let i=0; i< items; i++) {
      let dot = $('<div>');
      let className = 'dot';
      if (i == 0) {
        className += ' active';
      }
      dot.addClass(className);
     $('.dots').append(dot);
     
   }
  
  $('.item:not(.current):not(.next):not(.prev)')
    .css({'transform': "rotateY("+((currdeg*-1))+"deg)"})
  $('.item.next').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateX(50%)", 
  })
  $('.item.prev').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateX(-50%)", 
  })
  $('.item.current').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateZ(250px)", 
  })
}

function rotate(e){
  items = 3;
  
  $('.item.prev').removeClass('prev')/*.css({'transform': ''})*/;
  $('.item.next').removeClass('next')/*.css({'transform': ''})*/;
  if(e.data.d=="n"){
    if ($(".item.current").next().length) {
      $(".item.current")
      .removeClass('current')
      .next()
      .addClass('current'); 
      
      $('.dot.active')
      .removeClass('active')
      .next()
      .addClass('active'); 
    } else {
      $(".item.current")
      .removeClass('current')
      .addClass('prev')
      .parent()
      .find('.item:first')
      .addClass('current');
      
      $('.dot.active')
      .removeClass('active')
      .parent()
      .find('.dot:first')
      .addClass('active'); 
    }
    
    currdeg = (currdeg - 60) /*% 360*/;
  }
  
  if(e.data.d=="p"){
    if ($(".item.current").prev().length) {
      $(".item.current")
      .removeClass('current')
      .prev()
      .addClass('current');
      
      $(".dot.active")
      .removeClass('active')
      .prev()
      .addClass('active');
    } else {
      $(".item.current")
      .removeClass('current')
      .addClass('next')
      .parent()
      .find('.item:last')
      .addClass('current');
      
      $(".dot.active")
      .removeClass('active')
      .parent()
      .find('.dot:last')
      .addClass('active');
    }
    currdeg = (currdeg + 60) /*% 360*/;
  }
  if ($(".item.current").prev().length) {
  $(".item.current").prev().addClass('prev');
  } else {
    $(".item.current")
      .parent()
      .find('.item:last')
      .addClass('prev');  
  }
  
  if ($(".item.current").next().length) {
    $(".item.current").next().addClass('next');  
  } else {
    $(".item.current")
      .parent()
      .find('.item:first')
      .addClass('next');  
  }
  
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
  
  
  $('.item:not(.current):not(.next):not(.prev)')
    .css({'transform': "rotateY("+((currdeg*-1))+"deg)"})
  $('.item.next').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateX(50%)", 
  })
  $('.item.prev').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateX(-50%)", 
  })
  $('.item.current').css({
    "transform": "rotateY("+((currdeg*-1))+"deg) translateZ(250px)", 
  })
  
  // a.css({"transform": "rotateY("+(currdeg*-1)+"deg)"})
}

init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.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;
/*   transform-style: flat; */
  transition: transform 1s;
}

.item {
  transition: transform 1s;
  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;
  transform: translateZ(0px);
/*   z-index: -1 */
}

.item.current, .item.next, .item.prev {
/*   display: block; */
}

.item.current {
/*   transform: translateZ(250px); */
/*   z-index: 1; */
}

.a {
  transform: rotateY(0deg)  translateZ(250px);
  background: #ed1c24;
}
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
  z-index: -1;
}
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
}
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
}
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
} 
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
  z-index: -1
}

.c_next, .c_prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.c_next:hover, .c_prev:hover { color: #000; }
.c_next:active, .c_prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
}
.c_next { right: 5em; }
.c_prev { left: 5em; }

.dots {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}

.dot {
  border-radius: 50%;
  background-color: white;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 0px 5px;
}

.dot.active {
  background-color: gray;
}