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.
Created
October 12, 2015 08:00
-
-
Save mcanthony/3f695a99830bf880e5ef to your computer and use it in GitHub Desktop.
Flip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .Wrap | |
| - 5.times do | |
| .Ring | |
| - 16.times do | |
| .lvl1 | |
| .lvl2 | |
| .lvl3 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $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); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment