css - 如何使用 CSS 将元素翻转 180 度？

Question

我不想旋转它 - 这不是 1998 年! 是否可以在添加is-expanded类的时候单纯翻转这个元素？

 .resources__icon {
            @include icon('arrow-down-white', 28, 18);
        }


    .is-expanded.resources__icon {
                 -webkit-transform: rotate(180deg);
                 -moz-transform: rotate(180deg);
                 -o-transform: rotate(180deg);
                 -ms-transform: rotate(180deg);
                 transform: rotate(180deg);
            }

Answer 1

ScaleY 可以翻转图像，而不仅仅是“改变比例”——使用 scaleY 而不是旋转

.resources__icon {
            @include icon('arrow-down-white', 28, 18);
        }


    .is-expanded.resources__icon {
                    -moz-transform: scaleY(-1);
                    -o-transform: scaleY(-1);
                    -webkit-transform: scaleY(-1);
                    transform: scaleY(-1);
            }