Flip

Flip.markdown

Flip

Recreation of this:

http://12gon.tumblr.com/post/95627533833/flip-4gons

License: VVL (visual vomit license)

Forked from Nils Schönwald's Pen Flip.

A Pen by Michael Anthony Casey on CodePen.

License.

index.html

.Wrap
  - 5.times do
    .Ring
      - 16.times do
        .lvl1
          .lvl2
            .lvl3

style.css

$s: 11em;
$rn: 5;
$pn: 16;
$p-d: 360 / $pn;
$p-deg: $p-d * 1deg;
$t: 1.5s;

body {
  background-color: #f1200c;
  //background-color: #000;
  overflow: hidden;
  
  &:before,
  &:after {
//    content: '';
    position: absolute;
    background-color: #fff;
    z-index: 999;
  }
  
  &:before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
  }
  
  &:after {
    top: 50%;
    left: 0;
    height: 2px;
    width: 100%;
    margin-top: -1px;
  }
}

.lvl1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: top left;
  background-color: green;
}

.lvl2 {
  position: relative;
  animation: rotate $t ease-in-out infinite;
}

.lvl3 {
  position: absolute;
  width: $s;
  height: $s;
  background-color: #000;
  transform-origin: top left;
  backface-visibility: hidden;
  transform: rotate(-45deg);
  background-color: #000;
}

@for $j from 1 through $pn {
  .lvl1:nth-child(#{$j}) {
    transform: rotate($p-deg * ($j - 1)) scaleY(.2);
    z-index: $pn - $j;
    
    .lvl3 {
      //background-color: hsl($p-d * ($j - 1), 100%, 50%);
    }
  }
  .Ring:nth-child(2) .lvl1:nth-child(#{$j}) {
    transform: 
      rotate($p-deg * ($j - 1) + $p-deg * .5) 
      scale(.95, 0.392) 
      translateX($s * .75);
  }  
  
  .Ring:nth-child(3) .lvl1:nth-child(#{$j}) {
    transform: 
      rotate($p-deg * ($j - 1) + $p-deg) 
      scale(.85, 0.565) 
      translateX($s * 1.657);
  }  
  
  .Ring:nth-child(4) .lvl1:nth-child(#{$j}) {
    transform: 
      rotate($p-deg * ($j - 1) + $p-deg * 1.5) 
      scale(.72, 0.72) 
      translateX($s * 2.84);
  }  
  
  .Ring:nth-child(5) .lvl1:nth-child(#{$j}) {
    transform: 
      rotate($p-deg * ($j - 1) + $p-deg * 2) 
      scale(.57, 0.85) 
      translateX($s * 4.56);
  }  
}
      
@for $i from 1 through $rn {
  .Ring:nth-last-child(#{$i}) .lvl2 { 
    animation-delay: $t / $rn * $i * -.3;
  }
}

@keyframes rotate {
  0% { transform: rotateX(0); }
  90%,100% { transform: rotateX(180deg); }
}