CSS Transformation Testing

:root {
    background-color: #222b32;
    /*
        #222b32
        #263038
    */
}


.loader div {
    height: 3px;
    width: 3px;
    left: 50%;
    top: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
    position: absolute;
}

.loader {
    width: 20vh;
    height: 20vh;

    left: 50%;
    top: 50%;
    background-color: #ff3d00aa;
    transform: translate(-50%, -50%);
    position: absolute;
    overflow: hidden;

    animation: anim 6s linear infinite;
}

.loader #x {
    width: 100%;
}
.loader #y {
    height: 100%;
}
.loader #arrow {
    height: 0px;
    width: 0px;
    transform: translate(-50%, -10vh);
    background-color: #fff0;
    border-style: solid;
    border-width: 0px 2vh 4vh 2vh;
    border-color: #0000 #0000 #fff #0000;
}

@keyframes anim {
    0% {
        transform-origin: right center;
        transform: translate(-50%, -50%) rotate(0deg);
        /* transform: rotate(0deg) translate(-50%, -50%); */
    }
    100% {
        transform-origin: right center;
        transform: translate(-50%, -50%) rotate(360deg);
        /* transform: rotate(360deg) translate(-50%, -50%); */
    }
}

#kyle {
    position: absolute;
    width: 20vh;
    height: 20vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff8
}