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

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

第3872篇《可以使用CSS镜像/翻转文本吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答
DavaidTony宝儿 2020.03.30

再举一个例子，如何翻转角色。如果需要，请添加供应商前缀，但目前所有现代浏览器都支持无前缀的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>

小胖Gil 2020.03.30

这就是对我有用的 <span class="navigation-pipe">&gt;</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

您可以尝试盒装反射

box-reflect: 20px right;

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

宝儿理查德 2020.03.30

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

.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

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

CSS：

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

还有rotateY一个真正的镜像：

transform: rotateY(180deg);

也许更清楚和可以理解。

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

伽罗 2020.03.30

为了实现跨浏览器的兼容性，请创建此类

.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

您可以使用 

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android