` ````
.assembly
- 24.times do
.positioner
.prism
- 6.times do
.prism__face
```

` ````
@import 'compass/css3';
$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));
}
}
}
}
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers