A Pen by A Non Ymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

Pure CSS. Inspiration:

A Pen by Anonasaurus Rex on CodePen.

License.

index.haml

.scene
  -(2..4).each do |i|
    - if i != 4
      .assembly.nope
    - else
      .assembly
        .strip
        -(1..2).each do
          .roller
            -(1..i).each do
              .side

script.js

/* By @passcod
Adapted from http://codepen.io/thebabydino/pen/pzgiE

I think it would be nice as a spinner / loading animation somewhere. Also try commenting out the .assembly.nope line for an alternative form. */

style.scss

@import "compass";
$w: 3em;
$h: 4em;
$c: #f5f5f5;
$d: #00acd2;
$e: #ff5954;

html, body { height: 100%; }

.nope { display: none; }

body {
  overflow: hidden;
  margin: 0;
  perspective: 80em;
  perspective-origin: 50% 00%;
  background: $c;
  color: $c;
}

.scene {
  &, * {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 50%;
    transform-style: preserve-3d;
  }
  transform: translate(-15em, 15em) rotateX(75deg) rotate(22.5deg)
}

.assembly {
  @for $i from 1 to 15 {
    $ca: 360deg/($i + 1);
    $ri: ($w/2)/(if($i != 1, tan($ca/2), 2));
    $rc: ($w/2)/(if($i != 1, sin($ca/2), 1));
    &:nth-child(#{$i}) {
      z-index: -$i;
      transform: translate(0, -1.25*$i*$h);
      animation: slide#{$i} 1s ease-in-out infinite;
      @at-root {
        @keyframes slide#{$i} {
          to { transform: translate($w, -1.25*$i*$h); }
        }
      }
      .roller {
        transform: rotateY($ca/2) 
                   translateZ($rc) rotateY(-$ca*(1 + .5*($i%2)));
        animation: inherit;
        animation-name: roll#{$i}a;
        &:last-child {
          z-index: -1;
          margin: 0 4*$w;
          transform: rotateY(-$ca/2) 
                     translateZ(-$rc) rotateY(-$ca/2);
          animation-name: roll#{$i}b;
        }
        @at-root {
          @keyframes roll#{$i}a {
            to {
              transform: rotateY(-$ca/2) 
                         translateZ($rc) 
                         rotateY(-$ca*(1 + .5*($i%2)));
            }
          }
        }
        @at-root {
          @keyframes roll#{$i}b {
            to {
              transform: rotateY($ca/2) 
                         translateZ(-$rc) 
                         rotateY(-$ca/2);
            }
          }
        }
      }
      .side {
        margin: -$h/2 (-$w/2);
        width: $w; height: $h;
        @for $j from 0 to $i + 1 {
          &:nth-child(#{$j + 1}) {
            transform: rotateY($j*$ca) 
                       if($i != 1, translateZ($ri), ());
            @if $i > 2 {
              &:before {
                height: $ri;
                @if $i == 3 {
                  left: .125em;
                  width: calc(#{$w} - .125em);
                }
              }
            }
          }
        }
      }
    }
  }
}

.strip {
  margin: -$h/2 -1px;
  width: 4*$w; height: $h;
  border: solid .125em $c;
  background: 
    linear-gradient(90deg, $c .125em, transparent 0) $d;
  background-size: $w 100%;
}
.side {
  &:before, &:after {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: inherit; 
    backface-visibility: hidden;
    content: '';
  }
  &:before {
    top: 100%;
    height: .125em;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    border-top: solid .125em $c;
    background: $e;
  }
  &:after {
    height: inherit;
    border: solid .125em $c;
    background: $d;
  }
}