如何使用 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 ✂</span>
<span class="flip_V">Demo text ✂</span></code>

透過向元素添加相應的類別.flip_H或.flip_V，您可以輕鬆水平或垂直翻轉文字。

以上是如何使用 CSS 建立鏡像或翻轉文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！