CSS 转换可以水平和垂直翻转文本吗？

使用 CSS 翻转文本

是否可以使用 CSS 操作文本来镜像或翻转其方向？当您遇到需要反向显示特定字符​​或文本的场景时，例如将剪刀字符从右指向左翻转，就会出现此问题。

答案：

是的，CSS 转换提供了镜像或翻转文本的功能。为此，您可以使用scale()函数。

水平翻转：

水平翻转会反转x轴上文本的方向，使得它看起来好像指向相反的方向。要实现此目的，请将元素水平缩放 -1 倍：

<code class="css">-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);</code>

垂直翻转：

类似地，垂直翻转会沿 y 方向翻转文本-轴，反转其垂直方向。为此，请将元素垂直缩放 -1：

<code class="css">-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);</code>

示例：

下面是一个使用 HTML 和 CSS 来演示翻转效果的示例：

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

<code class="css">span {
  display: inline-block;
  margin: 1em;
}
.flip_H {
  transform: scale(-1, 1);
  color: red;
}
.flip_V {
  transform: scale(1, -1);
  color: green;
}</code>

通过使用此 CSS，第一个跨度 (flip_H) 中的剪刀字符将水平镜像，朝左，而第二个跨度 (flip_V) 中的字符将垂直翻转，朝上下来。

以上是CSS 转换可以水平和垂直翻转文本吗？的详细内容。更多信息请关注PHP中文网其他相关文章！