Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (84 sloc) 1.94 KB
@import "partials/colors";
@keyframes spinY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.pyramid-container {
perspective: 800px;
perspective-origin: center;
}
#pyramid {
transform-origin:50% 90% 0px;
transform-style: preserve-3d;
transform:rotateX(20deg) rotateY(40deg);
position: relative;
animation: spinY 8s infinite linear;
}
$base: 270px;
$half-base: ($base / 2);
$apothem: 270px; //(1/2 base) / cos(theta)
$apex-angle: 30deg; // apex angle = 180 - 90(right-angle) - α
$base-move: 0 - ($apothem - $half-base);
#pyramid div:not(.base) {
position: absolute;
border-left: $half-base solid transparent;
border-right: $half-base solid transparent;
border-bottom: $apothem solid;
transform-origin: $half-base $apothem 0; /* bottom of trangle (1/2 Base, Apothem) */
opacity: .5;
}
#pyramid div {
&:after {
position: absolute;
top: $half-base;
text-align: center;
color: #fff;
left: -10px;
font-size: 5em;
}
}
.base {
position: absolute;
width: $base;
height: $base;
background-color: rgba(147,81,166,0.9);
transform: rotateX(90deg) translate3d(0px, 0px, $base-move);
opacity: .5;
&:after {
content: "5";
left: 112px !important;
top: 93px !important;
}
}
#pyramid div.front {
border-bottom-color: #e04545;
transform: rotateY(0deg) translate3d(0px, 0px, $half-base) rotateX($apex-angle);
&:after {
content: "1";
}
}
#pyramid div.back {
border-bottom-color: #ccaf5a;
transform: rotateY(90deg) translate3d(0px, 0px, $half-base) rotateX($apex-angle);
&:after {
content: "2";
}
}
#pyramid div.left {
border-bottom-color: #800000;
transform: rotateY(180deg) translate3d(0px, 0px, $half-base) rotateX($apex-angle);
&:after {
content: "3";
}
}
#pyramid div.right {
border-bottom-color: #4ccfc8;
transform: rotateY(270deg) translate3d(0px, 0px, $half-base) rotateX($apex-angle);
&:after {
content: "4";
}
}