re-pen by ray anthony.

index.haml

%div.wrap
  %div.red-wrap
    -(1..20).each do
      %div.side

mexican beer.md

Tecate

eez more better

Forked from Nate Wiley's Pen CSS 3D RedBull Can .

A Pen by ray anthony on CodePen.

License.

style.scss

html, body {
  height: 100%;
}

body, {

  background: radial-gradient(circle at center, #eee, #373A5E);
  background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Avenida_Revoluci%C3%B3n_in_Tijuana_Mexico.JPG/1024px-Avenida_Revoluci%C3%B3n_in_Tijuana_Mexico.JPG') no-repeat center center;
  border: 5;
  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://liquorama.biz/images/Tecate%20Label.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);
  }
}