组合变换

语法说明

transform: translate() rotate() scale() skew();

• 可以在一个 transform 属性中组合多个变换函数
• 变换按从左到右的顺序依次应用
• 顺序很重要！不同的顺序会产生不同的结果
• 用空格分隔各个函数

示例 1：平移 + 旋转 + 缩放

先移动，再旋转，最后放大

.box {
  transform: 
    translateX(100px)
    rotate(45deg)
    scale(1.2);
}

示例 2：顺序的重要性

先旋转再平移 vs 先平移再旋转

/* 先旋转后平移 */
.box-a {
  transform: rotate(45deg) translateX(100px);
}

/* 先平移后旋转 */
.box-b {
  transform: translateX(100px) rotate(45deg);
}

示例 3：复杂组合

结合所有变换类型

.box {
  transform: 
    translate(80px, 30px)
    rotate(30deg)
    scale(1.3)
    skewX(10deg);
}