如何對元素應用多個 CSS 轉換？

使用多個 CSS 屬性轉換元素

CSS 允許對元素套用多個轉換。然而，當多次使用transform屬性時，只有最後一個指令生效。要套用多個轉換，必須將它們組合在一行上。

範例：

在下列 CSS 中，僅將翻譯應用於元素：

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

要套用這兩種轉換，請將它們組合在一個轉換上line:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

轉換順序

應用於單行的多個轉換從右到左進行處理。這意味著首先應用最右邊的轉換。

考慮以下範例：

transform: scale(1, 1.5) rotate(90deg);

transform: rotate(90deg) scale(1, 1.5);

這兩個轉換將不會產生相同的結果，因為不同的申請順序。

以上是如何對元素應用多個 CSS 轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！