如何使用 CSS 轉換水平和垂直翻轉文字？

使用 CSS 轉換翻轉文字

在 CSS 中，您可以使用轉換來操作文字和其他元素。一種常見的轉換是鏡像，也稱為翻轉。使用簡單的 CSS 屬性即可實現此效果。

要水平翻轉文字（在垂直軸上鏡像），請使用下列CSS 屬性：

-moz-transform：縮放(-1, 1);
- webkit-transform: 縮放(-1, 1);
-o-transform: 縮放(-1, 1);
-ms-transform: 縮放( -1, 1);
transform:scale (-1, 1);

此屬性將元素水平縮放-1，有效地沿垂直軸翻轉它。

類似地，要垂直翻轉文字（在水平軸上鏡像），請使用以下屬性：

-moz-transform:scale(1, -1);
-webkit-transform : 尺度(1, -1);
-o-transform: 尺度(1, -1);
-ms-transform: 尺度(1, -1);
變換: 尺度(1, -1);

透過套用此屬性，您可以將元素垂直縮放-1，並沿水平軸翻轉它。

範例

考慮以下HTML 程式碼，它顯示一些文字和剪刀字元：

示範文字✂
示範文字✂

下列的CSS 程式碼將水平和垂直翻轉效果應用於對應的Span：

span{ 顯示：內聯塊；保證金：1em； }
.flip_H{ 轉換：scale(-1, 1); 顏色：紅色; }
.flip_V{ 變換：scale(1, -1);顏色：綠色； }

這將沿著各自的軸鏡像剪刀角色，創建所需的左向剪刀。

以上是如何使用 CSS 轉換水平和垂直翻轉文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！