Live coded in 30 minutes on the 11th of August 2015. Uses transform-style: preserve-3d
, so it can only work in browsers supporting it. This excludes IE up to and including 11. It's also ugly if CSS filters are not supported. Tested and works in Firefox 39, Chrome 44, 46 (canary)/ Opera 31 beta on Windows 8. Inspiration:
Created
August 25, 2015 21:33
-
-
Save jheidt/a6d047535b440ce3ee8a to your computer and use it in GitHub Desktop.
Möbius 6hedrons (pure CSS)
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
.assembly | |
- 24.times do | |
.positioner | |
.prism | |
- 6.times do | |
.prism__face |
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
$n-prisms: 24; //same as in DOM | |
$height: 6.25em; | |
$base: 1em; | |
$base-c: #69f #7e4b4c; | |
$lat-c: #542252 #7e301a; | |
$radius: 1.625*$height; | |
$base-angle: 360deg/$n-prisms; | |
$t: 1.75s; | |
@mixin mix-me($c, $k) { | |
background: mix(nth($c, 1), nth($c, 2), $k); | |
} | |
body { | |
overflow: hidden; | |
margin: 0; | |
height: 100vh; | |
perspective: 40em; | |
background: #000; | |
} | |
.assembly { | |
&, * { | |
position: absolute; | |
top: 50%; left: 50%; | |
transform-style: preserve-3d; | |
} | |
transform: rotateX(-30deg); | |
} | |
.positioner { | |
@for $i from 0 to $n-prisms { | |
$curr-angle: $i*$base-angle; | |
$k: (1 + cos($curr-angle))*50%; | |
&:nth-child(#{$i + 1}) { | |
transform: rotateY($curr-angle) | |
translateZ($radius) | |
rotateX(70deg); | |
.prism { | |
animation-delay: -$i*$t/$n-prisms; | |
&__face { | |
@include mix-me($lat-c, $k); | |
&:nth-child(n + 5) { | |
@include mix-me($base-c, $k); | |
} | |
} | |
} | |
} | |
} | |
} | |
@keyframes rot { | |
75%, 100% { transform: rotateX(-.5turn); } | |
} | |
.prism { | |
animation: rot $t ease-in-out infinite; | |
&__face { | |
margin: -.5*$height (-.5*$base); | |
width: $base; height: $height; | |
backface-visibility: hidden; | |
&:nth-child(n + 5) { | |
margin-top: -.5*$base; | |
height: $base; | |
} | |
&:nth-child(-n+4):nth-child(2n) { | |
$bfix: .7; | |
-webkit-filter: brightness($bfix); | |
filter: brightness($bfix); | |
} | |
@for $i from 0 to 6 { | |
&:nth-child(#{$i + 1}) { | |
transform: | |
if($i < 4, | |
rotateY($i*90deg), | |
rotateX(pow(-1, $i)*90deg)) | |
translateZ(.5*if($i < 4, $base, $height)); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment