如何对元素应用多个 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中文网其他相关文章！