如何使用 CSS 创建镜像或翻转文本？

使用 CSS 镜像文本

使用 CSS 操作文本使其呈现镜像或翻转是否可行？例如，我们可能希望向左而不是向右显示剪刀字符“✂”。

CSS 转换来救援

CSS 转换可以实现这个效果。要水平翻转文本，请在 x 轴上对元素进行负向缩放：

``
-moz-transform:scale(-1, 1);
-webkit-transform:scale(- 1, 1);
-o-transform: 尺度(-1, 1);
-ms-transform: 尺度(-1, 1);
变换: 尺度(-1, 1);
``

要垂直翻转文本，请在 y 轴上对元素进行负向缩放：

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

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

通过向元素添加相应的类.flip_H或.flip_V，您可以轻松水平或垂直翻转文本。

以上是如何使用 CSS 创建镜像或翻转文本？的详细内容。更多信息请关注PHP中文网其他相关文章！