是否可以使用CSS/CSS3来镜像文本?
具体地说,我有这个剪刀字符“偏左”(✂),我想让它指向左边而不是右边。
是否可以使用CSS/CSS3来镜像文本?
具体地说,我有这个剪刀字符“偏左”(✂),我想让它指向左边而不是右边。
当前回答
您可以使用CSS转换来实现这一点。水平翻转会像这样缩放div:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
垂直翻转会涉及到div的缩放,就像这样:
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
演示:
Span{显示:inline-block;保证金:1 em;} .flip_H{转换:规模(- 1,1);颜色:红色;} .flip_V{转换:规模(1,-1);颜色:绿色;} <span class='flip_H'>演示文本✂ <span class='flip_V'>演示文本✂
其他回答
真正的镜子:
.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'>镜像文本
我在网上搜罗了包括
Stack Overflow回答, MSDN文章, http://css-tricks.com/almanac/properties/t/transform/, http://caniuse.com/搜索=变换, http://browserhacks.com/, http://www.useragentman.com/IETransformsTranslator/。
这个解决方案似乎适用于包括IE6+在内的所有浏览器,使用scale(-1,1)(适当的镜像)和适当的filter/-ms-filter属性(IE6-8):
/* Cross-browser mirroring of content. Note that CSS pre-processors
like Less cough on the media hack.
Microsoft recommends using BasicImage as a more efficent/faster form of
mirroring, instead of FlipH or some kind of Matrix scaling/transform.
@see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
@see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/
/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
and mirroring something that's already mirrored results in no net change! */
@media \0screen {
.mirror {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
}
}
.mirror {
/* IE6 and 7 via hack */
*filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
/* Standards browsers, including IE9+ */
-moz-transform: scale(-1,1);
-ms-transform: scale(-1,1);
-o-transform: scale(-1,1); /* Op 11.5 only */
-webkit-transform: scale(-1,1);
transform: scale(-1,1);
}
你可以试试box-reflect
box-reflect: 20px right;
参见CSS属性框-反射兼容性?欲知详情
<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-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>
以获得左侧有手柄的搜索图标