如何使用 CSS 将多个变换属性应用于元素？

在CSS样式开发中，我们常常需要对同一个元素同时应用旋转、缩放、平移、倾斜等多种变换效果，这时候就需要用到transform属性来组合多个变换函数。transform是CSS3引入的核心变换属性，支持在一个声明中写入多个变换函数，从而实现复合变换效果。

transform属性的基本语法

transform属性的语法格式为：transform: 变换函数1 变换函数2 ...;，多个变换函数之间用空格分隔，浏览器会按照从左到右的顺序依次执行这些变换操作。常见的变换函数包括：

• translate(x, y)：元素在X轴和Y轴方向的平移，也可以单独使用translateX()、translateY()
• scale(x, y)：元素在X轴和Y轴方向的缩放，也可以单独使用scaleX()、scaleY()
• rotate(angle)：元素顺时针旋转指定角度，单位为deg
• skew(x-angle, y-angle)：元素在X轴和Y轴方向的倾斜

多个变换属性的应用示例

下面是一个同时应用平移、旋转和缩放效果的示例，我们给一个div元素设置复合变换：

/* 基础样式 */
.box {
    width: 200px;
    height: 200px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 200px;
    margin: 50px auto;
    transition: transform 0.3s ease;
}

/* 同时应用平移、旋转、缩放三个变换 */
.box:hover {
    /* 先平移100px，再旋转45度，最后缩放为原来的1.2倍 */
    transform: translateX(100px) rotate(45deg) scale(1.2);
}

对应的HTML结构如下：

<div class="box">变换元素</div>

变换顺序对效果的影响

多个变换函数的执行顺序非常重要，不同的顺序会产生完全不同的视觉效果。因为CSS变换是基于元素的当前坐标系执行的，前一个变换会改变后续变换的参考坐标系。

我们可以通过两个示例对比顺序差异带来的影响：

/* 顺序1：先旋转再平移 */
.order1 {
    transform: rotate(45deg) translateX(100px);
}

/* 顺序2：先平移再旋转 */
.order2 {
    transform: translateX(100px) rotate(45deg);
}

第一个示例中，元素先旋转45度，此时X轴方向已经跟随旋转了45度，再沿X轴平移100px，实际平移方向是旋转后的X轴方向；第二个示例中，元素先沿原始X轴平移100px，再旋转45度，最终位置和方向都和第一个示例不同。

注意事项

• 不要多次单独声明transform属性，后面的声明会覆盖前面的，例如下面的写法只有缩放会生效：

  /* 错误写法，旋转会被覆盖 */
  .element {
      transform: rotate(45deg);
      transform: scale(1.2);
  }
  

• 如果需要设置变换的原点，可以使用transform-origin属性，默认原点是元素中心，可以设置为左上角、右下角或者自定义坐标
• 变换不会改变元素在文档流中的原始位置，不会影响其他元素的布局，只会视觉上改变元素的呈现效果

3D变换中的多属性应用

如果是3D场景下的变换，同样可以在transform中组合3D变换函数，例如：

/* 3D场景下的复合变换 */
.box-3d {
    transform: perspective(500px) rotateY(30deg) translateZ(50px);
}

这里先设置透视距离，再让元素绕Y轴旋转30度，最后沿Z轴平移50px，实现3D空间中的复合变换效果。

CSStransformtransform_属性元素变换修改时间：2026-07-05 22:48:34