CSS - Rating element after mirroring

Question

I want to mirror an element and then animate it's rotation, but it's also animating the scale it seems. How can I make it rotate as usual?

.test {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image: conic-gradient(red, blue);
    transform: scaleX(-1);

    animation:
        rotate
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

@keyframes rotate {
    30% {
        transform: rotate(-360deg);
    }
}

<div class="test"></div>

Answer 1

chain the transformation:

.test {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-image: conic-gradient(red, blue);
    transform: scaleX(-1);

    animation:
        rotate
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

@keyframes rotate {
    30% {
        transform:scaleX(-1) rotate(-360deg);
    }
}

<div class="test"></div>