文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS将元素翻转180度？

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

Stack Overflow用户

提问于 2018-08-10 09:09:27

回答 2查看 1.1K关注 0票数 -1

我不想旋转它-现在不是1998年了！是否可以在添加is -扩展类时完全翻转此元素？

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

css

transform

回答 2

Stack Overflow用户

发布于 2018-08-10 09:18:23

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

票数 1

Stack Overflow用户

发布于 2018-08-10 09:20:40

试试看:请将翻译替换为旋转！

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51777629

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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