mcanthony · October 12, 2015 08:00 · Oct 12, 2015
diff --git a/Flip.markdown b/Flip.markdown
@@ -0,0 +1,13 @@
+Flip
+----
+Recreation of this:
+
+http://12gon.tumblr.com/post/95627533833/flip-4gons
+
+License: VVL (visual vomit license)
+
+Forked from [Nils Schönwald](http://codepen.io/schoenwaldnils/)'s Pen [Flip](http://codepen.io/schoenwaldnils/pen/rOePyE/).
+
+A [Pen](http://codepen.io/macr/pen/jbLBWa) by [Michael Anthony Casey](http://codepen.io/macr) on [CodePen](http://codepen.io/).
+
+[License](http://codepen.io/macr/pen/jbLBWa/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,7 @@
+.Wrap
+  - 5.times do
+    .Ring
+      - 16.times do
+        .lvl1
+          .lvl2
+            .lvl3
diff --git a/style.css b/style.css
@@ -0,0 +1,109 @@
+$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); }
+}