如何使用 CSS 将元素翻转 180 度？答案

【问题标题】：How can I flip an element 180degrees with CSS?如何使用 CSS 将元素翻转 180 度？
【发布时间】：2019-01-17 13:05:16
【问题描述】：

我不想旋转它 - 这不是 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);
            }

【问题讨论】：

Flip / mirror an image horizontally + vertically with css的可能重复
除非你需要支持很老的浏览器和 IE，否则多年来没有必要使用供应商前缀。

标签： css transform

【解决方案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);
            }

【讨论】：

【解决方案2】：

试试吧：请将 translate 替换为 rotate！

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

1. None rotate
<br>
<img src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">
<br>
2. Rotate
<br>
<img class="rotate" src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">

【讨论】：