<div class="rotate-slider">
    <ul class="slides">
    <li>
      <div class="inner">
      <h2>Actual Rotating Slider</h2>
      <p>Built with math and dedication</p>
      </div>
    </li>
    <li>
      <div class="inner"></div>
    </li>
    <li>
      <div class="inner">
      <h2>Hates IE</h2>
      <p>Uses clip-path to shape slides</p>
      </div>
    </li>
    <li>
      <div class="inner">
      </div>
    </li>
    <li>
      <div class="inner">
      <h2>Easy to use</h2>
      <p>Just add list elements in the HTML and set a height and width in the JavaScript Settings</p>
      <p><small>Slider controls and proper jQuery plugin coming soon.</small></p>
      </div>
    </li>
    <li>
      <div class="inner">
      <h2>I'm not a thief!</h2>
      <p>Stock photos from www.pexels.com</p>
      </div>
    </li>
    </ul>
  </div>
  <svg>
    <defs>
      <clipPath id="slideClip">
      <path />
      </clipPath>
    </defs>
  </svg>

    @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
    body{
      background: #333;
      font-family: 'Roboto Slab', sans-serif;
      font-weight: 300;
      overflow: hidden;
    }
    .rotate-slider{
      margin: 5em auto;
      height: 360px;
      /* overflow: hidden; */
      width: 480px;
    }
    .rotate-slider ul.slides{
      height: 100%;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: relative;
        top: 0;
        left: 50%;
      -ms-transform-origin: center center;
      transform-origin: center center;
      width: 100%;
    }
    .rotate-slider ul.slides.animate{
      -webkit-transition: all 0.75s ease-in-out;
      transition: all 0.75s ease-in-out;
    }
    .rotate-slider ul.slides li{
      background-position: center;
      background-size: cover;
      display: block;
      color: #fff;
      list-style: none;
      position: absolute;
        top: 0;
        left: 50%;
      text-align: center;
      -ms-transform-origin: bottom center;
      transform-origin: bottom center;
      width: 100%;
    }
    .rotate-slider ul.slides li:nth-of-type(1){background: #3498db;}
    .rotate-slider ul.slides li:nth-of-type(2){background: url('http://static.pexels.com/wp-content/uploads/2014/05/car-oldtimer-snow-342-825x550.jpg');}
    .rotate-slider ul.slides li:nth-of-type(3){background: #e74c3c;}
    .rotate-slider ul.slides li:nth-of-type(4){background: url('http://static.pexels.com/wp-content/uploads/2014/06/analog-camera-old-olympus-om-10-1528-825x550.jpg');}
    .rotate-slider ul.slides li:nth-of-type(5){background: #f1c40f;}
    .rotate-slider ul.slides li:nth-of-type(6){background: url(http://static.pexels.com/wp-content/uploads/2014/06/bridge-city-night-645-827x550.jpg);}
    .rotate-slider ul.slides li .inner{
      box-sizing: border-box;
      padding: 2em;
      height: 100%;
      width: 100%;
    }

/* Radians to Degrees:  x * Math.PI/180; */
$(function(){
  /* Settings */
  var rotateSlider = {
    slideHeight : 360,
    slideWidth : 480,
  };

  /* Do Math and set properties */
  rotateSlider.slideCount = $('.rotate-slider .slides li').length;
  rotateSlider.slideAngle = 360 / $('.rotate-slider .slides li').length;
  rotateSlider.sliderElement = $('.rotate-slider');
  rotateSlider.slides = $('.rotate-slider .slides li');
  rotateSlider.slidesContainer = $('.rotate-slider .slides');
  rotateSlider.slideAngle = 360 / rotateSlider.slideCount;
  rotateSlider.halfAngleRad = rotateSlider.slideAngle / 2 * Math.PI/180;
  rotateSlider.innerRadius = 1 / Math.tan(rotateSlider.halfAngleRad) * rotateSlider.slideWidth / 2;
  rotateSlider.outerRadius = Math.sqrt(Math.pow(rotateSlider.innerRadius + rotateSlider.slideHeight, 2) + (Math.pow((rotateSlider.slideWidth / 2), 2)));
  rotateSlider.upperArcHeight = rotateSlider.outerRadius - (rotateSlider.innerRadius + rotateSlider.slideHeight);
  rotateSlider.lowerArcHeight = rotateSlider.innerRadius - (rotateSlider.innerRadius * (Math.cos(rotateSlider.halfAngleRad)));
  rotateSlider.slideFullWidth = (Math.sin(rotateSlider.halfAngleRad) * rotateSlider.outerRadius) * 2;
  rotateSlider.slideFullHeight = rotateSlider.upperArcHeight + rotateSlider.slideHeight + rotateSlider.lowerArcHeight
  rotateSlider.slideSidePadding = (rotateSlider.slideFullWidth - rotateSlider.slideWidth) / 2;
  rotateSlider.fullArcHeight = rotateSlider.outerRadius - (rotateSlider.outerRadius * (Math.cos(rotateSlider.halfAngleRad)));
  rotateSlider.lowerArcOffset = (rotateSlider.slideFullWidth - (Math.sin(rotateSlider.halfAngleRad) * rotateSlider.innerRadius * 2)) / 2;

  /* Set height and width of slider element */
  rotateSlider.sliderElement.css('height', rotateSlider.slideHeight+'px');
  rotateSlider.sliderElement.css('width', rotateSlider.slideWidth+'px');

  /* Set height and width of slides container and offset width*/
  rotateSlider.slidesContainer.css('height', rotateSlider.outerRadius*2+'px');
  rotateSlider.slidesContainer.css('width', rotateSlider.outerRadius*2+'px');

  /* Offset width and arc height */
  rotateSlider.slidesContainer.css('transform', 'translateX(-50%)');
  rotateSlider.slidesContainer.css('top', '-'+ rotateSlider.upperArcHeight +'px');

  /* Generate path for slide clipping */
  var pathCoords = 'M 0 '+rotateSlider.fullArcHeight;
  pathCoords += ' A '+rotateSlider.outerRadius+' '+rotateSlider.outerRadius+' 0 0 1 '+rotateSlider.slideFullWidth+' '+rotateSlider.fullArcHeight;
  pathCoords += ' L '+(rotateSlider.slideFullWidth-rotateSlider.lowerArcOffset)+' '+rotateSlider.slideFullHeight;
  pathCoords += ' A '+rotateSlider.innerRadius+' '+rotateSlider.innerRadius+' 0 0 0 '+rotateSlider.lowerArcOffset+' '+rotateSlider.slideFullHeight+' Z';
  $('#slideClip').find('path').attr('d', pathCoords);

  /* Apply styles to each slide */
  var i = 0;
  rotateSlider.slides.each(function(){
    /* Set distance from point of rotation */
    $(this).css('transform-origin', 'center '+(rotateSlider.innerRadius + rotateSlider.slideHeight)+'px');

    /* Set slide Height and Width */
    $(this).css('height', rotateSlider.slideHeight+'px');
    $(this).css('width', rotateSlider.slideWidth+'px');

    /* Set calculated padding for width, upper arc height, and lower arc height */
    $(this).css('padding', rotateSlider.upperArcHeight +'px '+rotateSlider.slideSidePadding+'px '+rotateSlider.lowerArcHeight+'px '+rotateSlider.slideSidePadding+'px ');

    /* Offset container Arc Height */
    $(this).css('top', rotateSlider.upperArcHeight +'px');

    /* Offset Width, then Rotate Slide, then offset individual Top Arcs  */
    $(this).css('transform', 'translateX(-50%) rotate('+rotateSlider.slideAngle * i+'deg) translateY(-'+ rotateSlider.upperArcHeight +'px)');

    /* Add clipping path  */
    $(this).css('-webkit-clip-path', 'url(#slideClip)');
    $(this).css('clip-path', 'url(#slideClip)');

    i++;
  });

  /* Set Interval to rotate */
  var currentRotation = 0;
  var rotateInterval = window.setInterval(function(){
    if(!rotateSlider.slidesContainer.hasClass('animate')){
      rotateSlider.slidesContainer.addClass('animate')
    }
    currentRotation = currentRotation - rotateSlider.slideAngle;
    rotateSlider.slidesContainer.css('transform', 'translateX(-50%) rotate('+currentRotation+'deg)');
  }, 4000);
});