可以使用CSS/CSS3来镜像文本吗?
具体地说,我有这个剪刀字符“✂”(✂
),我想要显示指向左侧而不是右侧。
发布于 2011-03-23 22:20:33
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
两个参数是X轴和Y轴,-1将是一个镜像,但您可以根据需要缩放到任何大小。上下颠倒的是(-1, -1)
。
如果你对2011年的跨浏览器支持的最佳选择感兴趣,请访问my older answer。
发布于 2012-07-13 01:16:46
真实的镜像:
.mirror{
display: inline-block;
font-size: 30px;
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
}
<span class='mirror'>Mirror Text<span>
发布于 2017-09-12 20:45:32
您可以使用以下两种方式之一
.your-class{
position:absolute;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
或
.your-class{
position:absolute;
transform: rotate(360deg) scaleX(-1);
}
请注意,将position
设置为absolute
非常重要!如果不进行设置,则需要设置display: inline-block;
https://stackoverflow.com/questions/5406368
复制相似问题