如何在一行中应用多个 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中文网其他相关文章！