html, body {

  height: 100%;

}

​

body {

  background: #222;

  background: radial-gradient(circle at center, #eee, #373A5E);

  overflow: hidden;

  min-height: 100%;

}

​

.wrap {

  perspective: 800px;

  perspective-origin: top;

  height: 100%;

  transform: rotateZ(10deg);

}

​

.red-wrap {

  position: relative;

  margin: 0 auto;

  top: 10%;

  width: 30px;

  height: 335px;

  transform-style: preserve-3d;

  transform-origin: center center;

  animation: rotate 10s infinite linear;

}

​

$total: 20;

$deg: 360/$total;

$imageWidth: 424;

$imageHeight: 335;

​

.side {

  position: absolute;

  height: $imageHeight+px;

  width: 24px;

  border-top: 5px solid gray;

  border-bottom: 5px solid gray;

  background: url(http://cdn.jsets.com/2/red-bull-wrapper.jpg);

}

​

@for $i from 1 through $total {

  .side:nth-child(#{$i}){

    transform: rotateY($i * $deg+deg) translateZ(70px);

    background-position: $imageWidth - ($i * $imageWidth/$total)+px 0;

  }

}

​

@keyframes rotate {

  100% {

    transform: rotateY(360deg);

  }

}