首頁 >web前端 >css教學 >如何使用 CSS 建立鏡像或翻轉文字?

如何使用 CSS 建立鏡像或翻轉文字?

Susan Sarandon
Susan Sarandon原創
2024-10-27 12:42:29639瀏覽

How Can I Use CSS to Create Mirrored or Flipped Text?

使用 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn