是否可以使用CSS/CSS3来镜像文本?

具体地说,我有这个剪刀字符“偏左”(✂),我想让它指向左边而不是右边。


当前回答

方向:rtl;可能就是你要找的。

其他回答

你可以使用“transform”来实现这一点。 http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

<span class="navigation-pipe">&gt;</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>

以获得左侧有手柄的搜索图标