如何在一行中套用多個 CSS 轉換以及應用順序是什麼？

在一行中套用多個 CSS 變換

在 CSS 中，您可以同時對一個元素套用多個變換。但是，如果您提供多個變換指令，則僅套用最後一個。

要在一行上套用多個變換，請用空格將它們連接起來：

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

順序應用

值得注意的是，多個變換是從右到左應用的。這表示轉換的順序很重要，因為：

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

不同於：

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

範例

考慮以下範例：

.orderOne, .orderTwo {
    font-family: sans-serif;
    font-size: 22px;
    color: #000;
    display: inline-block;
}

.orderOne {
    transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
    transform: rotate(90deg) scale(1, 1.5);
}

您可以透過在不同的應用中套用變換來觀察差異訂單。

以上是如何在一行中套用多個 CSS 轉換以及應用順序是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！