使用CSS翻轉文字

要使用CSS翻轉文字，我們將使用CSS transform屬性。翻轉是一種轉換或映象特定軸（水平或垂直）上元素的技術。我們將瞭解三種不同的方法來使用CSS翻轉文字。

在這篇文章中，我們有一些使用span標籤編寫的文字內容。我們的任務是使用CSS翻轉文字。

使用CSS翻轉文字的方法

以下是我們將在這篇文章中討論的使用CSS翻轉文字的方法列表，其中包含逐步說明和完整的示例程式碼。

使用scaleX函式進行水平文字翻轉

要使用CSS水平翻轉文字，我們將使用CSS scaleX()函式，該函式沿水平軸調整元素大小。如果我們在scale函式中傳遞-1作為引數，則元素將被翻轉。

  • 我們使用span標籤編寫文字內容，該內容包裝在div元素中，該元素居中顯示文字內容。
  • 我們使用span作為元素選擇器，它應用padding並設定文字的font-size。
  • 為了居中div，我們使用了display和flex屬性，例如justify-content用於水平居中，align-items用於垂直居中按鈕並設定div的height。
  • 我們在flipHorizontal類中使用了"transform: scaleX(-1);"，它水平翻轉文字。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用scaleX()函式水平翻轉文字。

<!DOCTYPE html>
<html>
<head>
    <title>
        Horizontal Text Flip using CSS
    </title>
    <style>
        span {
            padding: 30px;
            font-size: 18px;
        }
        div {
            display: flex;
            justify-content: center;
            height: 50vh;
            align-items: center;
        }
        .flipHorizontal {
            display: inline-block;
            transform: scaleX(-1);
            color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>
        Flipping the text using CSS
    </h3>
    <p>
        In this example we have used <strong>scaleX
        </strong> function to flip the text horizontally 
        using CSS.
    </p>
    <div>
        <strong>
            <span>
                Tutorialspoint
            </span>
        </strong>
        <strong>
            <span class="flipHorizontal">
                Tutorialspoint
            </span>
        </strong>
    </div>
</body>
</html>

使用scaleY函式進行垂直文字翻轉

在這種使用CSS垂直翻轉文字的方法中，我們將使用CSS scaleY()函式，該函式沿垂直軸調整元素大小。如果我們在scale函式中傳遞-1作為引數，則元素將被翻轉。

  • 我們使用了與第一種方法相同的過程來編寫和放置居中的文字內容。
  • 然後，我們在flipVertical類中使用了"transform: scaleY(-1);"，它垂直翻轉文字。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用scaleY()函式垂直翻轉文字。

<!DOCTYPE html>
<html>
<head>
    <title>
        Horizontal Text Flip using CSS
    </title>
    <style>
        span {
            padding: 30px;
            font-size: 18px;
        }
        div {
            display: flex;
            justify-content: center;
            height: 50vh;
            align-items: center;
        }
        .flipVertical {
            display: inline-block;
            transform: scaleY(-1);
            color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>
        Flipping the text using CSS
    </h3>
    <p>
        In this example we have used <strong>scaleY
        </strong> function to flip the text  
        using CSS.
    </p>
    <div>
        <strong>
            <span>
                Tutorialspoint
            </span>
        </strong>
        <strong>
            <span class="flipVertical">
                Tutorialspoint
            </span>
        </strong>
    </div>
</body>
</html>

使用rotateX函式映象文字

要使用CSS映象文字，我們將使用CSS rotateX()函式，該函式圍繞其水平軸旋轉元素。

  • 我們使用span和h1標籤編寫文字內容。
  • 然後，我們在mirror類中使用了"transform: rotateX(180deg);"，它映象文字。

示例

這是一個完整的示例程式碼，實現了上述步驟，以使用rotateX()函式映象文字。

<!DOCTYPE html>
<html>
<head>
   <title>
        Mirroring the Text using CSS
    </title>
   <style>
        .mirror {
           display: inline-block;
           transform: rotateX(180deg);
           color: #04af2f;
        }
   </style>
</head>
<body>
    <h3>
        Mirroring the text using CSS
    </h3>
    <p>
        In this example we have used <strong>rotateX
        </strong> function to mirror the text  
        using CSS.
    </p>
   <h1>
      <span>Tutorialspoint</span>
   </h1>
   <h1>
      <span class="mirror">Tutorialspoint</span>
   </h1>
</body>
</html>

結論

在這篇文章中，我們瞭解瞭如何使用CSS更改捲軸的位置。我們討論了三種不同的方法：使用CSS transform屬性的scaleX、scaleY和rotateX函式。

更新於：2024年9月13日

瀏覽量：3000+

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告