@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; user-select: none; } 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 12s linear infinite; } @keyframes animate{ from{transform: rotateX(-30deg) rotateY(0deg);} to{transform: rotateX(-30deg) rotateY(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); } .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); } .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); } .side{ color: #fff; position: relative; width: 100%; height: 100%; transform: translateZ(50rem); text-align: center; display: flex; justify-content: center; align-items: center; font-size: 4em; text-shadow: 0 0 50px #050505; }