CSS

Question

我想镜像一个元素，然后为其旋转设置动画，但它似乎也在为 scale 设置动画。我怎样才能让它像往常一样旋转？

.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

链接转换：

.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>

CSS - 镜像后的评级元素

CSS - Rating element after mirroring

rotation

scale