*{margin:0;  padding:0;  box-sizing:border-box;}

body{display: flex;  justify-content: center;  align-items: center;  min-height: 40vw;  background: #000; padding-top:200px;}

.cube{position: relative;  width: 300px;  height: 300px;  transform-style: preserve-3d;  animation: animate 4s linear infinite; top:200px;}

@keyframes animate
{
	0%
	{
		transform: rotateX(-45deg) rotateY(0deg);
	}
	100%
	{
		transform: rotateX(-45deg) 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(transparent, #ec0000);  transform: rotateY(calc(90deg * var(--i))) translateZ(150px);}

.top{position: absolute;  top: 0;  left: 0;  width: 300px;  height: 300px;  background: transparent;  transform: rotateX(90deg)  translatez(150px);}

.top::before{content: '';  position: absolute;  top:0;  left: 0;  width: 300px;  height: 300px;  background: #f00;  transform: translateZ(-400px);  filter: blur(20px);  box-shadow: 0 0 120px
	rgb(255 0 0 / 20%), 0 0 50px
	rgb(255 0 0 / 40%), 0 0 75px
	rgb(255 0 0 / 60%), 0 0 100px
	rgb(255 0 0 / 80%), 0 0 125px
	rgb(255 0 0);}













.cube2{position: relative;  width: 100px;  height: 100px;  transform-style: preserve-3d;  animation: animate 10s linear infinite; top:200px;}

@keyframes animate
{
	0%
	{
		transform: rotateX(-20deg) rotateY(0deg);
	}
	100%
	{
		transform: rotateX(-20deg) rotateY(360deg)
	}
}

.cube2 div{position: absolute;  top: 0;  left: 0;  width: 101%;  height: 101%;  transform-style: preserve-3d;}

.cube2 div span{position: absolute;  top: 0;  left: 0;  width: 101%;  height: 101%;  background: linear-gradient(#000,#00ef00);  transform: rotateY(calc(90deg * var(--i))) translateZ(50px);}

.top2{position: absolute;  top: 0;  left: 0;  width: 101px;  height: 101px;  background: #000;  transform: rotateX(90deg)  translatez(50px);}

.top2::before{content: '';  position: absolute;    transform: translateZ(-150px);}

.top2::after{content: '';  position: absolute;  top: 0px;  left: 0px;  width: 101px;  height: 101px;  background: #00ef00;  transform: translateZ(-149px);  filter: blur(10px);
    box-shadow: 0 0 120px
	rgb(0 255 0 / 20%), 0 0 50px
	rgb(0 255 0 / 60%), 0 0 100px
	rgb(0 255 0);}