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