应用多个 CSS 变换
CSS 变换允许开发人员以各种方式操作元素,包括平移、旋转和缩放。但是,当对一个元素应用多个变换时,通常只执行最后一个变换。
问题:
在以下示例中,未应用平移变换,因为旋转变换放在之后它:
li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }
解决方案:
要应用多个变换,它们必须放在一行上,并用空格分隔。变换将从右到左应用:
li:nth-child(2) { transform: rotate(15deg) translate(-20px,0px); }
因此,将首先应用旋转变换,然后是平移。
执行顺序:
应用多个变换时,变换的顺序很重要。例如,将元素旋转 90 度,然后将其缩放 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); }
中在此示例中,“.orderOne”将显示旋转 90 度并缩放 1.5,而“.orderTwo”将显示旋转 90 度,然后缩放1.5.这表明变换顺序很重要,在应用多个变换时必须仔细考虑。
以上是如何正确应用多个 CSS 转换?的详细内容。更多信息请关注PHP中文网其他相关文章!