Cube Rotate using CSS

on

 

<html>
<head>
<title>3D Lighting Box</title>
<link rel="stylesheet" href="custom.css" />
</head>
<body>
<div class="cube">
<div class="top"></div>

 <div>
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
</div>
</body>
</html>

=========== CSS ==========

*{
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{
0%{
transform: rotateX(-30deg) rotateY(0deg);
}
100%{
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:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #0f0;
transform: translateZ(-300px);
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);
}