@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); } }