*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #27282c;
}
.cube{
    position: absolute;
    top: 300px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    /* border: 1px solid red; */
    transform-style: preserve-3d;
    transform: rotateX(10deg);
    animation: animate1 6s linear infinite;
}
@keyframes animate1{
    0%{
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100%{
        transform: rotateX(-15deg) rotateY(360deg);
    }
}
.cube span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    border: 4px solid rgb(255, 255, 255);
    background: var(--clr);
    /* box-shadow: inset 0 0 10px gray; */
   transform: rotateY(calc(90deg * var(--i))) translateZ(100px);
}
.cube .top{
    position: absolute;
    /* left:0px; */
    right:0px;
    top: -100px;
    width: 100%;
    height: 100%;
    /* border: 3px solid red; */
    border: 4px solid rgb(255, 255, 255);
    background:var(--clr);
    transform:rotateX(90deg);
    box-shadow: inset 0 0 100px rgba(128, 128, 128, 0.075);
}
span:hover{
    background:transparent;
}
.cube2{
    position: absolute;
    top: 190px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    /* border: 1px solid red; */
    transform-style: preserve-3d;
    transform: rotateX(10deg);
    animation: animate2 6s linear infinite;
}
@keyframes animate2{
    0%{
        transform: rotateX(-15deg) rotateY(0deg);
    }
    100%{
        transform: rotateX(-15deg) rotateY(-360deg);
    }
}
.cube2 span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    border: 1px solid rgb(233, 91, 9);
    background: rgb(233, 91, 9);
    /* box-shadow: inset 0 0 10px gray; */
   transform: rotateY(calc(90deg * var(--i))) translateZ(50px);
}
.cube2 .top2{
    position: absolute;
    left:0px;
    /* right:0px; */
    top:70px;
    width: 100%;
    height: 100%;
    /* border: 3px solid red; */
    background:rgb(144, 143, 146);
    transform:rotateX(90deg);
    filter: blur(10px);
}