@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-1440deg);
}
}
@keyframes rotateY {
0% {
transform: rotateY(0deg)translateZ(50px);
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
25% {
transform: rotateY(-30deg)translateZ(50px);
filter: drop-shadow(10px 15px 2px rgba(0, 0, 0, .5));
}
50% {
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
75% {
transform: rotateY(30deg)translateZ(50px);
filter: drop-shadow(10px 15px 2px rgba(0, 0, 0, .5));
}
100% {
transform: rotateY(0deg)translateZ(50px);
filter: drop-shadow(25px 15px 2px rgba(0, 0, 0, .5));
}
}
@keyframes rotateZ {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes RGB {
0% {
filter: brightness(1.1)drop-shadow(0 0 40px #FF9999);
}
33.3% {
filter: brightness(1.1)drop-shadow(0 0 40px #FF9999);
}
33.4% {
filter: brightness(1.1)drop-shadow(0 0 40px #99FF99);
}
66.7% {
filter: brightness(1.1)drop-shadow(0 0 40px #99FF99);
}
66.8% {
filter: brightness(1.1)drop-shadow(0 0 40px #9999FF);
}
100% {
filter: brightness(1.1)drop-shadow(0 0 40px #9999FF);
}
}
.textToggleDisplay-on+.fan {
animation: rotate 1s linear infinite;
}
.fan>:first-child>:first-child {
animation: rotateZ 1s linear infinite reverse;
}
.fan:active>:first-child>:first-child {
animation: rotateZ 0.2s linear infinite reverse, RGB 5s linear infinite;
}
.fan3Dbg {
perspective: 100em;
perspective-origin: 50% 20%;
transition: 3s;
}
.fan3Dbg.textToggleDisplay-on {
perspective-origin: 50% 33%;
perspective: 9em;
}
.fan3D, .fan3D div {
transform-style: preserve-3d;
box-sizing: border-box;
}
.fan3D:hover {
animation: rotateFan 10s ease-in-out infinite;
}
.fan3D > div {
position: relative;
}
.fan3D > div div {
position: absolute;
}
.blades, .cover {
transform: translateZ(4em);
}
.blades > div:not(.axis) {
width: 50%;
height: 50%;
background: linear-gradient(to right, #e0e3e5, #8d9398);
border-radius: 25% 75% 50% 50% / 25% 25% 75% 75%;
left: 25%;
top: 0;
transform-origin: bottom;
}
.cover > div {
border-radius: 50%;
border: .2em solid;
box-sizing: border-box;
left: 50%;
top: 50%;
}
@keyframes rotateHead {
from {
transform: rotateY(-40deg);
}
to {
transform: rotateY(40deg);
}
}
@keyframes rotateBlade {
from {
transform: translateZ(4em) rotateZ(0deg);
}
to {
transform: translateZ(4em) rotateZ(360deg);
}
}
@keyframes rotateFan {
from {
transform: rotate3d(1, 1, 1, 360deg);
}
50% {
transform: none;
}
to {
transform: rotate3d(-1, 1, 1, 360deg);
}
}