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);
            }

Answer 2

尝试一下：请替换平移旋转！

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

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

2 个答案: