JSFiddle - React, Tailwind, and code Playground

by veloper

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://desandro.github.io/3dtransforms/js/utils.js"></script>
<body>
    <section id="options">
    <p id="navigation">
      <button id="previous" data-increment="-1">Previous</button>
      <button id="next" data-increment="1">Next</button>
    </p>

  </section>
<section class="container">
    <div id="carousel">
      <figure>1</figure>
      <figure>2</figure>
      <figure>3</figure>
      <figure>4</figure>
      <figure>5</figure>
      <figure>6</figure>
      <figure>7</figure>
      <figure>8</figure>
      <figure>9</figure>
    </div>
  </section>

  
</body>

CSS

.container {
      width: 210px;
      height: 140px;
      position: relative;
      margin: 50px auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 2200px;
         -moz-perspective: 1100px;
           -o-perspective: 1100px;
              perspective: 1100px;
    }

    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform: translateZ( -288px );
         -moz-transform: translateZ( -288px );
           -o-transform: translateZ( -288px );
              transform: translateZ( -288px );
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    #carousel figure {
      display: block;
      position: absolute;
      width: 400px;
      height: 400px;
      left: 10px;
      top: 10px;
      border: 2px solid black;
      line-height: 116px;
      font-size: 80px;
      font-weight: bold;
      color: white;
      text-align: center;
    }

    #carousel figure:nth-child(1) { background: hsla(   0, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(2) { background: hsla(  40, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(3) { background: hsla(  80, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(4) { background: hsla( 120, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(5) { background: hsla( 160, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(6) { background: hsla( 200, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(7) { background: hsla( 240, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(8) { background: hsla( 280, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(9) { background: hsla( 320, 100%, 50%, 0.8 ); }

    #carousel figure:nth-child(1) {
      -webkit-transform:...

JavaScript

var init = function() {
      var carousel = document.getElementById('carousel'),
          navButtons = document.querySelectorAll('#navigation button'),
          panelCount = carousel.children.length,
          transformProp = Modernizr.prefixed('transform'),
          theta = 0,

          onNavButtonClick = function( event ){
            var increment = parseInt( event.target.getAttribute('data-increment') );
            theta += ( 360 / panelCount ) * increment * -1;
            carousel.style[ transformProp ] = 'translateZ( -288px ) rotateY(' + theta + 'deg)';
          };

      for (var i=0; i < 2; i++) {
        navButtons[i].addEventListener( 'click', onNavButtonClick, false);
      }

    };
 
                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ...