如何使用 CSS 將多個 transform 屬性應用於元素？

要使用CSS將多個transform屬性應用於元素，我們將使用兩種不同的方法，這兩種方法都使用transform屬性。在第一種方法中，我們將使用transform屬性的兩個函式，而在第二種方法中，我們將使用巢狀類來應用不同的轉換。

在這篇文章中，我們有一個帶有背景影像的容器，我們的任務是使用CSS將多個transform屬性應用於元素。

向元素應用多個轉換的方法

應用多個轉換值

要使用 CSS 將多個 transform 屬性應用於元素，我們將使用 rotate() 和 scale() transform 屬性的函式。它旋轉並應用容器的縮放。

  • 我們使用了 **container** 類來使用 CSS height 和 width 屬性建立框以設定其尺寸，添加了 border 並使用 margin-left 和 margin-top 屬性設定其左和上邊距。
  • 我們使用 CSS background-image 屬性設定容器的背景影像，使用 background-repeat 停用其重複，設定尺寸並應用 transition 以實現容器的平滑旋轉。
  • 然後，我們使用 **"transform: rotate(45deg) scale(1.2);"** 使用 hover偽類 在懸停時旋轉和縮放影像。

示例

這是一個完整的示例程式碼，實現了上述步驟，使用 **rotate()** 和 **scale()** 函式將多個 transform 屬性應用於元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            height: 100px;
            width: 300px;
            border: 1px solid black;
            margin-left: 80px;
            margin-top: 150px;
        }
        .image {
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
            transition: transform 0.5s ease;
        }        
        .image:hover{
            transform: rotate(45deg) scale(1.2);
        }
    </style>
</head>
<body>
    <h3>
        To Apply Multiple Transform Property 
        to an Element Using CSS
    </h3>
    <p>
        In this example we have used transform
        <strong>rotate()</strong> and <strong>
        scale()</strong> method to apply multiple 
        transformation to an element using CSS.
    </p>
    <div class="container image"></div>
</body>
</html>

使用類巢狀應用多個轉換

在這種方法中，為了使用 CSS 將多個轉換應用於元素，我們使用 transform 屬性的 translate()、rotate() 和 scale() 函式。這裡首先應用旋轉和轉換轉換，然後應用縮放轉換。

  • 我們使用 **container** 類建立一個容器併為容器設定背景影像。
  • 然後，我們使用 **first** 類來設定應用 **旋轉** 和 **轉換** 轉換，它將容器旋轉 -5 度，並在 x 方向平移 200 畫素，在 y 方向平移 50 畫素。
  • 最後，我們使用了 **second** 類，它將 **縮放** 轉換應用於容器。

示例

這是一個完整的示例程式碼，實現了上述步驟，使用 **rotate()**、**translate()** 和 **scale()** 函式將多個 transform 屬性應用於元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            border: 1px solid black;
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
        }
        .first {
            transform: rotate(-5deg) translate(200px, 50px);
        }
        .second {
            border: 1px solid black;
            background-image: url(/html/images/test.png);
            background-repeat: no-repeat;
            height: 80px;
            width: 350px;
            transform: scale(1.5);
        }  
    </style>
</head>
<body>
    <h3>
        To Apply Multiple Transform Property 
        to an Element Using CSS
    </h3>
    <p>
        In this example we have used transform
        <strong>translate() and rotate()</strong>  
        method on first class and <strong>scale()
        </strong> method to apply multiple 
        transformation to an element using CSS.
    </p>
    <h4>Before: </h4>
    <div class="container"></div>
    <h4>After Multiple Transformation: </h4>
    <div class="first">
        <div class="second"></div>
    </div>
</body>
</html>

結論

為了使用 CSS 將多個 transform 屬性應用於元素，我們瞭解了兩種不同的方法。在第一種方法中，我們使用 transform 屬性的兩個值來應用多個轉換，而在第二種方法中，我們使用了 div 類的巢狀來逐個應用轉換。

更新於：2024年9月4日

5K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告