:root  {
    --size: 500px;
}

img {
    width: var(--size);
    height: var(--size);
}

@keyframes spin {
    from {
        rotate: 360deg;
    } 
    to {
        rotate: 0deg;
    }
}

.container {
    width: var(--size);
    height: var(--size);

    margin-left: 10px;
    margin-top: 10px;

    position: absolute;
    overflow: hidden;
}


.container-orig {
    clip-path: polygon(0% 50%, 50% 50%, 0% 0%);
}

.container-orig img {
    animation: spin 6s infinite linear;
}

.container-reverse {
    clip-path: polygon(50% 50%, 100% 50%, 100% 0%);
}

.container-reverse img {
    transform: rotateY(180deg);
    animation: spin 6s infinite reverse linear;
}



#image-container-1 {
    rotate: 0deg;
}


#image-container-2 {
    rotate: 0deg;
}

#image-container-3 {
    rotate: 90deg;
}

#image-container-4 {
    rotate: 90deg;
}

#image-container-5 {
    rotate: 180deg;
}

#image-container-6 {
    rotate: 180deg;
}

#image-container-7 {
    rotate: 270deg;
}

#image-container-8 {
    rotate: 270deg;
}