$side: 15em;
$half-side: $side/2;
$wing-width: $side * .8;
$wing-height: $side * .4;
$wing-offset: (
$side - $wing-width)/2;
$wing-angle: 40;
$wing-angle-1: #{-90 + $wing-angle}deg;
$wing-angle-2: #{-90 - $wing-angle}deg;
$wing-time: .7s;
$wing-time-step: $wing-time/6;
$depth: 2em;
$shadow-width: 2em;
BODY {
perspective: 1000px;
perspective-origin: center center;
overflow: hidden;
font-size: 14px;
background: #000;
background-image: linear-gradient(to right,
hsla(0, 0%, 100%, .025) 50%,
transparent 30%
);
background-size: 2rem 100%;
}
.container {
width: $side;
height: $side;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
.cube {
position: absolute;
width: $side;
height: $side;
// outline: 2px solid gold;
transform-style: preserve-3d;
&--2 {
transform: rotateX(135deg) rotateY(135deg);
}
&--3 {
// display: none;
transform: rotateX(135deg) rotateZ(135deg);
}
}
.side {
position: absolute;
width: $side;
height: $side;
transform-style: preserve-3d;
}
.spot {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 45%;
height: 45%;
// border: 1px dashed white;
box-shadow: 0 0 35px 25px black inset;
border-radius: 50%;
transform-style: preserve-3d;
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$wing-height/2;
margin-left: -$wing-width/2;
width: $wing-width;
height: $wing-height;
box-sizing: border-box;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 16'%3E%3Cpath d='M13 11.3L15.2 9c.6.2 1.6.8 2.4 1.4-1 .6-2.3 1.5-3.5 2-1.3.6-2.7 2-3.5 3 .2-1 1-2.8 2.2-4zm-8.6.3c-1.5-2.2-3-5-3.7-7L6.5 12l-2-.4zM12.6 8c2-.6 3.2-4.4 4.8-3l.5.7-3 2.8c-1 .8-1.8 1.7-2.5 2.4-1 1-1.7 2.2-2 3.3 0-1.2.7-2.6 1.2-4l1-2.3zm-7 1c0-.6 0-1.3-.2-2.5 1 .6 3 1.7 3.4 2.4v1c0 1.8.3 3.6.6 4.7l-4-5c0-.2 0-.4.2-.7zm-.3-3c-.6-2-2-4.5-2.7-6C4 .6 6 1.8 7.6 3v2.4c-.2.7-.2 1.5-.2 2L5.4 6zm-.6 6c.8 0 1.7.3 2.2.5l2.5 3.2c-.4 0-.7 0-1-.2-1-.2-2.5-1.6-3.8-3.5zm13-2l-2-1.3L18 6.3c.4 1 .2 2.4-.2 3.7zM11 16c.8-1 2.2-2.5 3.5-3 1-.5 2-1 3-1.7-.5 1-1 2-1.4 2.5-1 1.4-3 2-5 2zm-.8-10.4c.6 1 1 1.7 1.2 2.4h.5l-.8 2.2c-.6 1.2-1 2.6-1.3 4-.4-1.3-.6-2.8-.6-4.3 0-1.7.4-3.3.8-4.4zM4.7 6C5 7.7 5 8.7 5 9L.2 3C0 1.8 0 .8.4.4.8 0 1.2 0 1.8 0c.7 1.2 2.3 4 3 6zm3 1.6c0-1.7 0-3.5.3-4.2.7.5 1.3 1 1.8 1.7-.4 1-.7 2-1 3.5l-1-1z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center bottom;
animation: wing $wing-time infinite;
// animation: bg-size 10s infinite;
}
&::before {
transform: rotateX($wing-angle-1) translateY(-50%);
color: gold;
}
&::after {
transform: rotateX($wing-angle-2) translateY(-50%);
color: teal;
}
&--top {
&::before,
&::after {
background: linear-gradient(to bottom,
indigo 10%,
teal,
gold,
red);
animation-delay: -$wing-time-step;
}
}
&--bottom {
&::before,
&::after {
background: linear-gradient(to top,
indigo 10%,
teal,
gold,
red);
animation-delay: -$wing-time-step*2;
}
}
&--left {
&::before,
&::after {
background: linear-gradient(to bottom,
indigo 10%,
crimson,
gold,
lawngreen,
teal);
animation-delay: -$wing-time-step*3;
}
}
&--right {
&::before,
&::after {
background: linear-gradient(to top,
indigo,
crimson,
gold,
lawngreen,
teal 90%);
animation-delay: -$wing-time-step*4;
}
}
&--back {
&::before,
&::after {
background: linear-gradient(to top,
teal,
darkgreen,
lawngreen,
gold,
orangered,
red 90%);
animation-delay: -$wing-time-step*5;
}
}
&--front {
&::before,
&::after {
background: linear-gradient(to bottom,
teal 10%,
darkgreen,
lawngreen,
gold,
orangered,
red);
animation-delay: -$wing-time-step*6;
}
}
}
.side--back {
transform: translateZ(-$half-side) rotateY(180deg);
}
.side--left {
transform: translateX(-$half-side) rotateY(-90deg);
}
.side--right {
transform: translateX($half-side) rotateY(90deg);
}
.side--top {
transform: translateY(-$half-side) rotateX(90deg);
}
.side--bottom {
transform: translateY($half-side) rotateX(-90deg);
}
.side--front {
transform: translateZ($half-side);
}
@keyframes rotate {
100% {
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
@keyframes wing {
50% {
transform: rotateX(-90deg) translateY(-50%);
}
}
@keyframes bg-size {
0% {
background-size: 100% 100%;
background-position: 0 50%;
}
50% {
background-size: 100% 200%;
background-position: 0 0%;
}
100% {
background-size: 100% 100%;
background-position: 0 50%;
}
}
// Helpers
HTML,
BODY {
height: 100%;
}
BODY {
display: flex;
justify-content: center;
align-items: center;
}
.wings-src {
position: absolute;
bottom: 10px;
right: 10px;
opacity: .075;
font: 12px/1.4 Tahoma, sans-serif;
text-align: right;
transition: .4s all;
color: #FFF;
&:hover {
opacity: .5;
}
A {
color: inherit
}
}
