style 32.css

/* .fa-sharp{
    color: red;
} */
h1{
    margin-left: 105px;
    font-size: 50px;
}
h2{
    font-size: 50px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #222;
}
.cube{
    position: absolute;
    width: 300px;
    height: 300px;
}
.cube div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: animate 6s linear infinite;

}
@keyframes animate
{
0%
    {
        transform: rotatex(-20deg) rotateY(360deg);
    }
    100%
    {
        transform: rotatex(-20deg) rotateY(0deg);
    }
}
 .cube .big span
{
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--clr);
    transform: rotateY(calc(90deg * var(--i)))
    translateZ(150px);
    transform-style: preserve-3d;
transition: 0.5s;
}
.cube:hover .big span
    {
background: transparent;
transition: all 1s linear;
border: 10px solid #ffa20d;
filter: drop-shadow(0 0 20px #ffa20d);
    }
    .cube .big span.top
    {
        transform: rotateX(90deg) translateZ(150px);
    }
    .cube .big span.top ::before
    {
        content: '';
        position: absoulte;
        inset: 0;
        transform: translateZ(-350px);
        background: rgba(0,0,0,0.5);
    filter: blur(50px);
    }



    .cube2{
        position: absolute;
        width: 300px;
        height: 300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-400px );
    }
    .cube2 div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: animate2 6s linear infinite;
        scale: 0.5;
        
    
    }
    @keyframes animate2
    {
    0%
        {
            transform: rotatex(-20deg) rotateY(0deg);
        }
        100%
        {
            transform: rotatex(-20deg) rotateY(360deg);
        }
    }
    .cube2 .big span
    {
        position: absolute;
        top: 30px;
        width: 300px;
        height: 300px;
        background:var(--clr);
        transform: rotateY(calc(90deg * var(--i)))
        translateZ(150px);
        transform-style: preserve-3d;
    transition: 0.5s;
    }
    .cube:hover  ~ .cube2 .big span
        {
    background: transparent;
    transition: all 1s linear;
    border: 10px solid #fff;
    filter: drop-shadow(0 0 20px #fff);
        }
        .cube2 .big span.top
        {
            transform: rotateX(90deg) translateZ(150px);
        }
        .cube2 .big span.top ::before
        {
            content: '';
            position: absoulte;
            inset: 0;
            transform: translateZ(-350px);
            background: rgba(0,0,0,0.35);
        filter: blur(50px);
        }