Skip to content

Instantly share code, notes, and snippets.

@jheidt
Created August 25, 2015 21:33
Show Gist options
  • Save jheidt/a6d047535b440ce3ee8a to your computer and use it in GitHub Desktop.
Save jheidt/a6d047535b440ce3ee8a to your computer and use it in GitHub Desktop.
Möbius 6hedrons (pure CSS)
.assembly
- 24.times do
.positioner
.prism
- 6.times do
.prism__face

Möbius 6hedrons (pure CSS)

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:

gif

Source.

A Pen by Ana Tudor on CodePen.

License.

$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