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

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

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

当前回答

还有一个真正镜像的rotateY:

transform: rotateY(180deg);

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

编辑:似乎在Opera上不起作用……遗憾的是。但它在Firefox上运行良好。我猜这可能需要隐含地说我们正在做某种翻译3d ?或者类似的东西。

2013-05-26 21:34:31

其他回答

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

css:

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

2011-03-23 14:05:11

我在网上搜罗了包括

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);
}

2013-10-02 17:49:12

你可以使用

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

注意，将位置设置为绝对是非常重要的!如果你不设置它，你需要设置display: inline-block;

2017-09-12 12:45:31

再举一个角色如何翻转的例子。如果需要，可以添加厂商前缀，但目前所有现代浏览器都支持无前缀转换属性。唯一的例外是启用了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">✂</span></li> <li>Flipped: <span class="scissors flipped">✂</span></li> <li>Upward: <span class="scissors upward">✂</span></li> <li>Downward: <span class="scissors downward">✂</span></li> </ul> </body> </html>

2017-04-15 15:55:46

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

2020-05-02 21:32:38

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

推荐文章

最新文章

标签