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

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

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

当前回答

你可以试试box-reflect

box-reflect: 20px right;

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

2013-01-02 04:43:14

其他回答

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

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

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

2013-10-14 14:15:40

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

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

2017-03-01 09:45:21

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

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

css:

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

2011-03-23 14:05:11

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

2020-05-02 21:32:38

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

推荐文章

最新文章

标签