CSS中的transform

在 CSS 中，transform 是用于用于用于对元素进行几何变换的属性，可实现旋转、缩放、平移、倾斜等效果，且不会影响其他元素的布局（不会触发重排）。以下是其核心用法和特性：

1. 基本语法

element {
  transform: 变换函数1(参数) 变换函数2(参数); /* 多个变换可叠加 */
  transform-origin: x-axis y-axis; /* 变换原点（默认中心） */
  transition: transform 0.3s; /* 配合过渡实现平滑动画 */
}

2. 常用变换函数

（1）平移（translate）

• 沿 X/Y 轴移动元素，不影响布局。

   .box {
    transform: translate(50px, 30px); /* X轴+50px，Y轴+30px */
    transform: translateX(50px);      /* 仅X轴 */
    transform: translateY(30px);      /* 仅Y轴 */
    transform: translateZ(100px);     /* 3D Z轴（需配合perspective） */
  }
  

百分比基于元素自身尺寸：translate(50%, 50%) 表示移动自身宽高的一半。

（2）旋转（rotate）

• 绕原点旋转元素，单位为 deg（度）或 rad（弧度）。

  .box {
    transform: rotate(45deg);      /* 顺时针旋转45度 */
    transform: rotate(-30deg);     /* 逆时针旋转30度 */
    transform: rotateX(60deg);     /* 3D 绕X轴旋转 */
    transform: rotateY(60deg);     /* 3D 绕Y轴旋转 */
  }
  

• 配合 transform-origin: left top; 可改变旋转中心（如绕左上角旋转）。

（3）缩放（scale）

• 放大或缩小元素，默认以中心为基准。

  .box {
    transform: scale(1.5);       /* 宽高均放大1.5倍 */
    transform: scaleX(0.8);      /* 仅宽度缩小到80% */
    transform: scaleY(1.2);      /* 仅高度放大到120% */
  }
  

• 负值会翻转元素（如 scaleX(-1) 水平翻转）。

（4）倾斜（skew）

• 沿 X/Y 轴倾斜元素，产生扭曲效果。

  .box {
    transform: skew(20deg, 10deg); /* X轴倾斜20度，Y轴倾斜10度 */
    transform: skewX(30deg);       /* 仅X轴 */
    transform: skewY(15deg);       /* 仅Y轴 */
  }
  

（5）矩阵变换（matrix）

• 用矩阵值一次性定义复杂变换（较少直接使用）。

  .box {
    transform: matrix(1, 0, 0, 1, 50, 30); /* 等价于translate(50px, 30px) */
  }
  

3. 关键特性

（1）不影响布局

transform 变换后的元素仍占据原位置（不会改变文档流），避免了 margin 或 top/left 带来的重排性能问题。

（2）叠加变换

多个变换函数可按顺序叠加（从右到左执行）：

/* 先旋转45度，再平移50px（注意顺序影响结果） */
.box {
  transform: translate(50px) rotate(45deg);
}

4. 应用场景

（1）悬停动画

.button {
  transition: transform 0.3s;
}
.button:hover {
  transform: scale(1.05) translateY(-3px); /* 轻微放大+上移 */
}

（2）居中对齐

/* 未知尺寸元素水平垂直居中 */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸偏移 */
}

（3）3D 卡片效果

.card {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.card:hover {
  transform: rotateY(180deg); /* 翻转卡片 */
}

（4）滚动动画

结合 JavaScript 监听滚动，动态改变 transform：

window.addEventListener('scroll', function() {
  const scrollY = window.scrollY;
  document.querySelector('.box').style.transform = `translateY(${scrollY * 0.5}px)`;
});