``````.shape
-(1..6).each do |i|
.piece
-(1..4).each do |j|
.face.face--triangle
.face.face--square``````
``````@import "compass/css3";

\$a: 13em; // side of cube
\$df: \$a*sqrt(2); // diagonal of cube face
\$dc: \$a*sqrt(3); // diagonal of cube
\$l: \$dc/2; // lateral side of triangular face of pyramid
\$axis: 'Y' 'Y' 'X';
lightblue teal skyblue aqua;
\$matrix: 1  2  3  4, // lateral faces of 1st pyramid
8 11  7  2, // lateral faces of 2nd pyramid
12  6  9 11,
5  4 10  6,
3  7  9 10,
12  8  1  5;
\$cf: 1.01; // correction factor

@function asin(\$val, \$e: pi()/7200) {
/*
* \$val: the value for which we compute the arc sine;
* \$e: tolerated error; lower = better precision
*
* the function returns the arc sine of \$val
*
* Examples:
* asin(.5) returns 29.97584deg (using default tolerated error)
* asin(0, pi()/180) returns 0deg
*/

\$sum: 0; // the "infinite" sum we compute
\$sign: 1; // sign of angle
\$flag: 0; // 0 if angle in absolute value < 45deg, 1 otherwise
\$i: 0; // current index
\$c: 1;
\$j: 2*\$i + 1;

@if abs(\$val) > sin(45deg) {
\$flag: 1;
\$sign: \$val/abs(\$val);
\$val: sqrt(1 - pow(\$val, 2));
}

\$term: \$c*pow(\$val, \$j)/\$j;

@while abs(\$term) > \$e {
\$sum: \$sum + \$term;

\$i: \$i + 1;
\$c: \$c*(2*\$i - 1)/(2*\$i);
\$j: 2*\$i + 1;

\$term: \$c*pow(\$val, \$j)/\$j;
}

\$result: \$sign*(\$flag*pi()/2 + pow(-1, \$flag)*\$sum);

@return \$result;
}

@function atan(\$val, \$e: pi()/7200) {
/*
* \$val: the value for which we compute the arc tangent
* \$e: tolerated error; lower = better precision
*
* the function returns the arc tangent of \$val
*
* Examples:
* atan(1) returns ~45deg (using default tolerated error)
* atan(0, pi()/180) returns 0deg
*/

\$val: \$val/sqrt(1 + pow(\$val, 2));

@return asin(\$val, \$e);
}

\$sa: pi()/2*1rad - \$va; // skew angle
\$da: pi()/4*1rad; // dihedral angle for pyramid

@mixin size-pos(\$w, \$h: \$w) {
margin: -\$h/2 (-\$w/2);
width: \$w; height: \$h;
}

body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 50em;
background: darkgrey;
}

.shape, .shape *, .shape *:before {
position: absolute;
top: 50%; left: 50%;
transform-style: preserve-3d;
}

.shape {
transform: rotate(15deg) rotateY(0deg);
animation: rot 5.3s linear infinite;
}

@keyframes rot {
to { transform: rotate(15deg) rotateY(360deg); }
}

@for \$i from 0 to 6 {
\$b: (floor(\$i/4)*pow(-1, \$i) +
\$val: 'rotate#{nth(\$axis, ceil((\$i + 1)/2))}(#{\$b})';

.piece:nth-child(#{\$i + 1}) {
animation: ani#{\$i} 7.5s ease-in-out infinite alternate;

.face--square {
\$c: blueviolet;
opacity: .5;
background:
lighten(\$c, random(40)), darken(\$c, random(40)));
}
@for \$j from 0 to 4 {
.face--triangle:nth-child(#{\$j + 1}):before {
\$c: nth(\$shades, nth(nth(\$matrix, \$i + 1), \$j + 1));
darken(\$c, 15%), lighten(\$c, 15%));
}
}
}

@keyframes ani#{\$i} {
0%, 20% { transform: unquote(\$val) translateZ(\$a/2); }
40% {
transform: unquote(\$val) translateZ(\$a/2) translateZ(\$a);
}
60% {
transform:
unquote(\$val)
translateZ(\$a/2)
translateZ(\$a)
}
80%, 100% {
transform:
unquote(\$val)
translateZ(\$a/2)
translateZ(\$a)
translateZ(\$cf*\$a);
}
}
}

.face {
backface-visibility: hidden;
&:before {
@include size-pos(\$a);
background: rgba(255, 0, 0, .1);
}
}

.face--square {
@include size-pos(\$a);
background: rgba(0, 0, 155, .1);
}

.face--triangle {
overflow: hidden;
@include size-pos(\$dc/2);
opacity: .5;
@for \$i from 0 to 4 {
&:nth-child(#{\$i + 1}) {
transform:
rotateY(\$i*pi()/2*1rad) // rotate around pyramid height
translateZ(\$a/2) // move to side of base square
rotateX(pi()/2*1rad - \$da) // rotate to form pyramid
rotate(\$va/2) // 2D shaping starts here
skewY(\$sa)
scaleX(\$sf)
scale(\$cf);
&:before {
transform:
scaleX(1/\$sf)
skewY(-\$sa)
rotate(-\$va/2)
translateY(-50%);
content: '';
}
}
}
}``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.