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

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgb(0,35,51);
}

.pyramid {
    position: absolute;
    top: 10%;width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: move 4s linear infinite;
}

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

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

.pyramid div span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        #2c002e,
        #9f00a2   
    );
    clip-path: polygon(
        50% 0%,
        0% 100%,
        100% 100%
    );
    transform: 
    rotateY(calc(90deg * var(--i)))
    translateZ(100px)
    rotateX(30deg);
    transform-origin: bottom;
}

.pyramid .glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dd03e1;
    transform:
     rotateX(90deg)
     translateZ(-250px);
     filter: blur(50px);   
}