是否可以使用CSS/CSS3来镜像文本?
具体地说,我有这个剪刀字符“偏左”(✂),我想让它指向左边而不是右边。
是否可以使用CSS/CSS3来镜像文本?
具体地说,我有这个剪刀字符“偏左”(✂),我想让它指向左边而不是右边。
当前回答
方向:rtl;可能就是你要找的。
其他回答
你可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
<span class="navigation-pipe">></span>
display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
只需要显示:内联块或块旋转。基本上第一个答案是好的。但是-180度不起作用。
真正的镜子:
.mirror { 显示:inline-block; 字体大小:30 px; -webkit-transform:矩阵(-1,0,0,1,0,0); -moz-transform:矩阵(-1,0,0,1,0,0); -o-transform:矩阵(-1,0,0,1,0,0); 变换:矩阵(-1,0,0,1,0,0); } <span class='mirror'>镜像文本
-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年跨浏览器支持的最佳选项感兴趣,请参阅我以前的回答。
为了跨浏览器兼容,创建这个类
.mirror-icon:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
并将其添加到您的图标类,即。
<i class="icon-search mirror-icon"></i>
以获得左侧有手柄的搜索图标