*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #050505; } .cube{ position: relative; width: 300px; height: 300px; transform-style: preserve-3d; animation: animate 4s linear infinite; } @keyframes animate{ from{transform: rotateX(-30deg) rotateY(0deg);} to{transform: rotateX(-30deg) rotateY(360deg);} } @keyframes colr{ from{filter: hue-rotate(0deg);} to{filter: hue-rotate(360deg);} } .cube div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .cube div span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#151515, #00ec00); transform: rotateY(calc(90deg * var(--i))) translateZ(150px); animation: colr 4s linear infinite; } .top{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #222; transform: rotateX(90deg) translateZ(150px); } .top::after{ content: ''; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #00ec00; transform: translateZ(-300px); animation: colr 4s linear infinite; } .top::before{ content: ''; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #0f0; transform: translateZ(-380px); filter: blur(20px); box-shadow: 0 0 120px rgba(0,255,0,0.2), 0 0 200px rgba(0,255,0,0.4), 0 0 300px rgba(0,255,0,0.6), 0 0 400px rgba(0,255,0,0.8), 0 0 500px rgba(0,255,0,1); animation: Bcolr 4s linear infinite; } @keyframes Bcolr{ from{filter: hue-rotate(0deg) blur(20px);} to{filter: hue-rotate(360deg) blur(20px);} } @keyframes boxsha{ 0%{filter: drop-shadow(0 0 120px rgba(0,255,0,0.2));} 25%{filter: drop-shadow(0 0 200px rgba(0,255,0,0.4));} 50%{filter: drop-shadow(0 0 300px rgba(0,255,0,0.6));} 100%{filter: drop-shadow(0 0 500px rgba(0,255,0,1));} }