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

问题描述 投票：0回答：15

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

具体来说，我有一个剪刀字符“✂”（

✂
），我想显示它指向左而不是右。

html css
15个回答
549
投票

您可以使用 CSS 转换来实现此目的。水平翻转涉及缩放 div，如下所示：

transform: scale(-1, 1);

垂直翻转需要像这样缩放 div：

transform: scale(1, -1);

演示：

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>

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

71
投票

真实镜子：

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

16
投票

您可以使用其中一个 

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

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 \0screen {
  .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);
}
6
投票

还有真正的镜子的

rotateY
：

transform: rotateY(180deg);

这或许更加清晰易懂。

编辑： 但似乎不适用于 Opera……遗憾的是。但它在 Firefox 上运行良好。我想可能需要含蓄地说我们正在做某种

translate3d
？或者类似的东西。

6
投票

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

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

获取左侧手柄的搜索图标

4
投票

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

CSS：

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
4
投票

这与像 's7 笔画图标' 和 'font-awesome':

这样的字体图标效果很好 
.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

然后在目标元素上：

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

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

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

2
投票

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

1
投票

你可以尝试box-reflect

box-reflect: 20px right;

请参阅 CSS 属性框反映兼容性？了解更多详细信息

1
投票

我们可以使用很少的代码，使用 css 关键帧及其 

alternate
属性来制作非常酷的文本效果（尝试删除 
alternate
以查看差异）：

span {
  font-weight: 1000; font-size: 3.3em;
}
small {
  display: inline-block;
  font-size: 2.3em;
  animation: 1s infinite alternate coolrotate
}

@keyframes coolrotate {
  from {
    transform: scale(1, 1) translate(-0.1em, 0)
  }
  to {
    transform: scale(-1, 1) translate(0, 0)
  }
}
<span>
  <span>c</span>
  <small>o</small>
  <span>o</span>
  <small>L</small>
  <small>...</small>
</span>

0
投票

这对我有用

<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 不起作用。

-1
投票

direction: rtl;
可能就是您正在寻找的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.