你可以使用CSS镜像/翻转文本?

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

具体来说，我有这个剪刀字符“✂”(✂)，我想显示它指向左边而不是右边。

303782 次浏览
小开

你可以使用'transform'来实现这一点。 http://jsfiddle.net/aRcQ8/ < / p >

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
小开 
-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年跨浏览器支持的最佳选项感兴趣，请参阅我以前的回答。

小开
最佳答案

您可以使用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{ display: inline-block; margin:1em; }
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }
<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

小开

真正的镜子:

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

小开

你可以试试box-reflect

box-reflect: 20px right;

更多细节见CSS属性框-反射兼容性?

小开

还有一个rotateY用于一个真实的镜像:

transform: rotateY(180deg);

这一点或许更清楚，也更容易理解。

编辑:似乎不能在Opera上工作，虽然…很遗憾。但它在Firefox上运行良好。我猜它可能需要隐式地说，我们正在做某种translate3d也许?或者类似的东西。

小开

我在网上搜罗了包括

这个解决方案似乎适用于包括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);
}
小开

为了跨浏览器兼容，创建这个类

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

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

小开

这是为我工作的<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度不起作用。

小开

只是增加了一个工作演示水平和垂直的镜子翻转。

.horizontal-flip {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}


.vertical-flip {
-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 class="horizontal-flip">
Hello, World
<input type="text">
</div>
<hr>
<div class="vertical-flip">
Hello, World
<input type="text">
</div>

小开

再举一个角色如何翻转的例子。如果需要，可以添加厂商前缀，但目前所有现代浏览器都支持无前缀转换属性。唯一的例外是启用了Opera Mini模式的Opera(约3%的全球用户)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text rotation</title>
<style type="text/css" media="screen">
.scissors {
display: inline-block;
font-size: 50px;
color: red;
}
.original {
color: initial;
}
.flipped {
transform: rotateZ(180deg);
}
.upward {
transform: rotateZ(-90deg);
}
.downward {
transform: rotateZ(90deg);
}
</style>
  

</head>
<body>
<ul>
<li>Original: <span class="scissors original">&#9986;</span></li>
<li>Flipped: <span class="scissors flipped">&#9986;</span></li>
<li>Upward: <span class="scissors upward">&#9986;</span></li>
<li>Downward: <span class="scissors downward">&#9986;</span></li>
</ul>
</body>
</html>

小开

你可以使用

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

小开

这适用于“s7笔画图标”和“font-awesome”这样的字体图标:

.mirror {
display: inline-block;
transform: scaleX(-1);
}

然后在目标元素上:

<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>
小开

direction: rtl;可能是你要找的。

小开

我们可以使用非常少的代码，使用css关键帧和它的alternate属性(尝试删除alternate来查看区别)，制作非常酷的文本效果:

span {
font-weight: 1000; font-size: 3.3em;
}
small {
display: inline-block;
font-size: 2.3em;
animation: 1s infinite alternate coolrotate
}


@keyframes coolrotate {
from {
transform: scale(1, 1) translate(-0.1em, 0)
}
to {
transform: scale(-1, 1) translate(0, 0)
}
}
<span>
<span>c</span>
<small>o</small>
<span>o</span>
<small>L</small>
<small>...</small>
</span>


提交答案