transform属性怎么使用

transform属性是CSS中用于对元素进行几何变换的属性，它可以直接修改元素的位置、大小、角度等视觉表现，且变换过程不会影响文档流的正常布局，是前端实现动画和特殊样式效果的常用工具。

transform属性的基本语法

transform属性的基础语法格式如下，它支持接收一个或多个变换函数作为参数，多个函数之间用空格分隔：

/* 基础语法 */
transform: transform-function1() transform-function2();

需要注意的是，transform的变换默认是以元素的中心点作为原点，我们可以通过transform-origin属性自定义变换原点的位置。

常用变换函数详解

1. 平移变换 translate

translate函数用于移动元素的位置，分为水平平移、垂直平移和二维平移三个常用形式：

• translateX(x)：仅水平方向移动元素，x为正则向右，为负则向左
• translateY(y)：仅垂直方向移动元素，y为正则向下，为负则向上
• translate(x, y)：同时设置水平和垂直方向的移动，y参数可以省略，省略时默认值为0

以下是平移变换的代码示例：

.box {
  width: 100px;
  height: 100px;
  background: #4CAF50;
  /* 向右移动20px，向下移动30px */
  transform: translate(20px, 30px);
}

2. 旋转变换 rotate

rotate函数用于让元素围绕变换原点进行旋转，参数单位为角度deg，正值为顺时针旋转，负值为逆时针旋转：

.box {
  width: 100px;
  height: 100px;
  background: #2196F3;
  /* 顺时针旋转45度 */
  transform: rotate(45deg);
}

3. 缩放变换 scale

scale函数用于改变元素的大小，分为水平缩放、垂直缩放和二维缩放三个形式：

• scaleX(x)：仅水平方向缩放，x大于1为放大，小于1为缩小，为负则水平翻转
• scaleY(y)：仅垂直方向缩放，y大于1为放大，小于1为缩小，为负则垂直翻转
• scale(x, y)：同时设置水平和垂直缩放，y参数可以省略，省略时默认等于x的值

.box {
  width: 100px;
  height: 100px;
  background: #FF9800;
  /* 水平放大1.5倍，垂直放大1.2倍 */
  transform: scale(1.5, 1.2);
}

4. 倾斜变换 skew

skew函数用于让元素沿着水平或垂直方向发生倾斜变形，参数单位同样为deg：

• skewX(x)：仅水平方向倾斜，x为正则向左倾斜，为负则向右倾斜
• skewY(y)：仅垂直方向倾斜，y为正则向上倾斜，为负则向下倾斜
• skew(x, y)：同时设置水平和垂直方向的倾斜，y参数可以省略，省略时默认值为0

.box {
  width: 100px;
  height: 100px;
  background: #9C27B0;
  /* 水平方向倾斜30度 */
  transform: skewX(30deg);
}

组合变换的使用

transform支持同时传入多个变换函数，执行顺序是从左到右依次执行，不同的顺序可能会产生不同的效果：

.box {
  width: 100px;
  height: 100px;
  background: #F44336;
  /* 先平移再旋转，和先旋转再平移的效果不同 */
  transform: translate(20px, 20px) rotate(30deg);
}

变换原点的设置

默认情况下，所有变换都是围绕元素的中心点执行，我们可以通过transform-origin属性修改变换原点的位置，该属性支持关键词、像素值、百分比三种取值方式：

.box {
  width: 100px;
  height: 100px;
  background: #00BCD4;
  transform-origin: left top; /* 设置变换原点为左上角 */
  transform: rotate(45deg);
}

3D变换基础

除了二维变换，transform还支持3D变换，常用的3D变换函数有translate3d()、rotate3d()、scale3d()等，使用3D变换时需要先给父元素设置perspective属性来定义3D元素的透视效果：

.parent {
  perspective: 500px; /* 设置透视距离 */
}
.child {
  width: 100px;
  height: 100px;
  background: #8BC34A;
  /* 沿Y轴旋转45度，形成3D旋转效果 */
  transform: rotateY(45deg);
}

transformtransform_rotatetransform_scaletransform_translate修改时间：2026-06-27 10:15:28