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

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

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

当前回答

这适用于's7 stroke icons'和'font-awesome'这样的字体图标:

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

然后在目标元素上:

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

2020-02-20 13:26:10

其他回答

再举一个角色如何翻转的例子。如果需要，可以添加厂商前缀，但目前所有现代浏览器都支持无前缀转换属性。唯一的例外是启用了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

还有一个真正镜像的rotateY:

transform: rotateY(180deg);

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

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

2013-05-26 21:34:31

你可以试试box-reflect

box-reflect: 20px right;

参见CSS属性框-反射兼容性?欲知详情

2013-01-02 04:43:14

真正的镜子:

.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'>镜像文本

2012-07-12 17:16:46

这适用于's7 stroke icons'和'font-awesome'这样的字体图标:

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

然后在目标元素上:

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

2020-02-20 13:26:10

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

推荐文章

最新文章

标签