Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.