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

Question

提问by pistacchio

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

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

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

具体来说，我有这个剪刀字符“✂”（✂），我想显示指向左而不是右。

Answer 1

回答by methodofaction

You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:

您可以使用 CSS 转换来实现这一点。水平翻转将涉及像这样缩放 div：

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

And a vertical flip would involve scaling the div like this:

垂直翻转将涉及像这样缩放 div：

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

DEMO:

演示：

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

Answer 2

回答by Chris Sobolewski

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be (-1, -1).

这两个参数是 X 轴和 Y 轴，-1 将是一个镜像，但您可以缩放到您喜欢的任何大小以满足您的需要。颠倒和向后将是(-1, -1)。

If you're interested in the best option available for cross browser support back in 2011, see my older answer.

如果您对 2011 年可用于跨浏览器支持的最佳选项感兴趣，请参阅我的旧答案。

Answer 3

回答by Cícero Verneck Corrêa

Real mirror:

真镜：

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Answer 4

回答by Emanuela Colta

You can user either

您可以使用

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

or

或者

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

Notice that setting positionto absoluteis very important! If you won't set it, you will need to set display: inline-block;

请注意，设置position到absolute是很重要的！如果你不会设置它，你将需要设置 display: inline-block;

Answer 5

回答by Jay Dansand

I cobbled together this solution by scouring the Internet including

我通过搜索互联网拼凑了这个解决方案，包括

Stack Overflow answers,
MSDN articles,
http://css-tricks.com/almanac/properties/t/transform/,
http://caniuse.com/#search=transform,
http://browserhacks.com/, and
http://www.useragentman.com/IETransformsTranslator/.

堆栈溢出答案，
MSDN文章，
http://css-tricks.com/almanac/properties/t/transform/,
http://caniuse.com/#search=transform，
http://browserhacks.com/和
http://www.useragentman.com/IETransformsTranslator/。

This solution seems to work in all browsers including IE6+, using scale(-1,1)(a proper mirror) and appropriate filter/-ms-filterproperties when necessary (IE6-8):

此解决方案似乎适用于所有浏览器，包括 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 .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);
}
screen {
  .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);
}

Answer 6

回答by Michael

For cross browser compatibility create this class

为了跨浏览器兼容性创建此类

<i class="icon-search mirror-icon"></i>

And add it to your icon class, i.e.

并将其添加到您的图标类中，即

transform: rotateY(180deg);

to get a search icon with the handle on the left

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

Answer 7

回答by jeromej

There's also the rotateYfor a real mirror one:

还有rotateY一个真正的镜子：

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

Which, perhaps, is even more clear and understandable.

或许，这更清晰易懂。

EDIT:Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3dperhaps? Or something like that.

编辑：虽然在 Opera 上似乎不起作用……但遗憾的是。但它在 Firefox 上运行良好。我想可能需要含蓄地说我们正在做某种事情translate3d？或类似的东西。

Answer 8

回答by Rito

you can use 'transform' to achieve this. http://jsfiddle.net/aRcQ8/

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

css:

css：

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

Answer 9

回答by niyasc

Just adding a working demo for horizontal and vertical mirror flip.

只需添加一个用于水平和垂直镜像翻转的工作演示。

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

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

Answer 10

回答by drugan

Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).

再举一个如何翻转角色的例子。如果需要，请添加供应商前缀，但目前所有现代浏览器都支持无前缀的转换属性。如果启用了 Opera Mini 模式，唯一的例外是 Opera（全球用户约 3%）。

##代码##

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

提问by pistacchio

回答by methodofaction

DEMO:

演示：

回答by Chris Sobolewski

回答by Cícero Verneck Corrêa

回答by Emanuela Colta

回答by Jay Dansand

回答by Michael

回答by jeromej

回答by Rito

回答by niyasc

回答by drugan

相关推荐

最近更新

标签

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

提问by pistacchio

回答by methodofaction

DEMO:

演示：

回答by Chris Sobolewski

回答by Cícero Verneck Corrêa

回答by Emanuela Colta

回答by Jay Dansand

回答by Michael

回答by jeromej

回答by Rito

回答by niyasc

回答by drugan

相关推荐

Html 表格单元格上的额外空白

Html colspan 宽度问题

Outlook 表格宽度问题中的 HTML 电子邮件 - 内容比指定的表格宽度宽

Html 样式 <thead>

相关推荐

最近更新

标签