可以使用CSS镜像/翻转文本吗？

梅2020-03-30

Is it possible to use CSS/CSS3 to mirror text?

Specifically, I have this scissors char “✂” (✂) that I'd like to display pointing left and not right.

DavaidTony宝儿2020/03/30 18:28:15

再举一个例子，如何翻转角色。如果需要，请添加供应商前缀，但目前所有现代浏览器都支持无前缀的transform属性。唯一例外是Opera，如果启用了Opera Mini模式（约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>

小胖Gil2020/03/30 18:28:14

这就是对我有用的 <span class="navigation-pipe">></span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

只需要display：inline-block或block即可旋转。所以基本上第一个答案是好的。但是-180无效。

番长猴子2020/03/30 18:28:14

您可以尝试盒装反射

box-reflect: 20px right;

看到CSS属性框反射兼容性吗？更多细节

宝儿理查德2020/03/30 18:28:14

只需为水平和垂直镜像翻转添加一个有效的演示。

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

小宇宙2020/03/30 18:28:14

您可以使用“转换”来实现。 http://jsfiddle.net/aRcQ8/

CSS：

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

ProStafan2020/03/30 18:28:14

还有rotateY一个真正的镜像：

transform: rotateY(180deg);

也许更清楚和可以理解。

编辑：虽然似乎无法在Opera上工作……可悲的是。但是它在Firefox上可以正常工作。我想可能需要隐式地说我们正在做某种事情translate3d？或类似的东西。

伽罗2020/03/30 18:28: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>

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

蛋蛋小卤蛋2020/03/30 18:28:14

您可以使用

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

Tom凯2020/03/30 18:28:14

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer