你能用CSS来镜像/翻转文字吗？

Question

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

具体来说,我有这个剪刀char"✂"(✂),我想显示左,而不是右.

Answer 1

您可以使用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);

DEMO:

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>

Answer 2

-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年支持跨浏览器支持的最佳选项感兴趣,请参阅我的旧答案.

Answer 3

真实的镜子:

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

Answer 4

您也可以使用

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

Answer 5

我通过搜索互联网拼凑了这个解决方案

• Stack Overflow答案,
• MSDN文章,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform,
• 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);
}

Answer 6

还有rotateY一个真正的镜子：

\n\n

transform: rotateY(180deg);\n

\n\n

这也许更清楚、更容易理解。

\n\n

编辑：遗憾的是，\xe2\x80\xa6 似乎不适用于 Opera。但它在 Firefox 上运行良好。我想可能需要含蓄地说我们正在做某种translate3d事情？或类似的东西。

\n

Answer 7

对于跨浏览器兼容性,请创建此类

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

获取左侧手柄的搜索图标