本教程共 44 篇 · 第 36 篇 · 更新于 2026-07-29 · 约 12 分钟阅读

36. 2D 变换

本节目标：掌握 CSS 2D 变换的四种基本方法（位移、旋转、缩放、倾斜），理解变换原点的概念，能够组合多种变换效果。

CSS 变换让元素可以在二维平面上移动、旋转、缩放和倾斜。它不改变文档流，只影响元素的视觉呈现。

transform 属性基础

所有 2D 变换都通过 transform 属性应用。多个变换函数用空格分隔。

.element {
  transform: translate(50px, 30px) rotate(45deg) scale(1.5);
}

变换的顺序很重要。

和 rotate() translate() 效果完全不同，因为每次变换都基于新的坐标系统。

translate：位移

translate() 让元素从当前位置移动。可以设 X 方向和 Y 方向。

/* 向右 50px，向下 30px */
transform: translate(50px, 30px);

/* 只沿 X 轴 */
transform: translateX(50px);

/* 只沿 Y 轴 */
transform: translateY(-20px);

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #3498DB;
      margin: 40px;
      transition: transform 0.3s;
    }
    .box:hover {
      transform: translate(30px, -20px);
    }
  </style>
</head>
<body>
  <div class="box">悬停移动</div>
</body>
</html>

Tip

的百分比是相对元素自身的尺寸，不是父元素。translate(50%, 0) 移动自身宽度的一半。

rotate：旋转

rotate() 让元素旋转指定角度。正值顺时针，负值逆时针。

transform: rotate(45deg);   /* 顺时针 45 度 */
transform: rotate(-30deg);  /* 逆时针 30 度 */

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #E74C3C;
      margin: 60px;
      transition: transform 0.4s;
    }
    .box:hover {
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box">悬停旋转</div>
</body>
</html>

角度单位：

单位	含义	示例
`deg`	度	`45deg`
`rad`	弧度	`3.14rad`
`turn`	圈	`0.25turn` = 90°

scale：缩放

scale() 改变元素的尺寸。1 是原始大小，大于 1 放大，小于 1 缩小。

transform: scale(2);      /* 宽高都放大 2 倍 */
transform: scale(1.5, 0.8); /* 宽放大 1.5 倍，高缩小到 0.8 */
transform: scaleX(2);     /* 只放大宽度 */
transform: scaleY(0.5);   /* 只缩小高度 */

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #2ECC71;
      margin: 60px;
      transition: transform 0.3s;
    }
    .box:hover {
      transform: scale(1.3);
    }
  </style>
</head>
<body>
  <div class="box">悬停放大</div>
</body>
</html>

Note

缩放的是视觉大小，元素在文档流中占据的空间不变。如果想改变实际占位尺寸，需要改 width/height。

skew：倾斜

skew() 让元素沿 X 轴或 Y 轴倾斜，产生平行四边形效果。

transform: skewX(20deg);       /* 沿 X 轴倾斜 */
transform: skewY(10deg);       /* 沿 Y 轴倾斜 */
transform: skew(20deg, 10deg); /* 同时沿两个轴 */

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .box {
      width: 120px;
      height: 80px;
      background: #9B59B6;
      margin: 60px;
      transition: transform 0.3s;
    }
    .box:hover {
      transform: skewX(-15deg);
    }
  </style>
</head>
<body>
  <div class="box">悬停倾斜</div>
</body>
</html>

transform-origin：变换原点

默认情况下，变换以元素中心为原点。transform-origin 可以改变这个参考点。

transform-origin: center center; /* 默认值 */
transform-origin: top left;      /* 左上角 */
transform-origin: 50% 100%;      /* 底部中心 */
transform-origin: 10px 20px;     /* 距左上角 10px 20px */

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #F39C12;
      margin: 60px;
      transition: transform 0.4s;
    }
    .box:hover {
      transform: rotate(45deg);
      transform-origin: top left; /* 绕左上角旋转 */
    }
  </style>
</head>
<body>
  <div class="box">绕角旋转</div>
</body>
</html>

做折叠菜单箭头、下拉指示器时，改

可以让旋转轴心更自然。

组合变换

多个变换可以组合使用，从左到右依次应用。

/* 先移动，再旋转，最后缩放 */
transform: translateX(100px) rotate(45deg) scale(1.2);

<!DOCTYPE html>
<html lang="zh">
<head>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 40px;
    }
    .box {
      width: 80px;
      height: 80px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: transform 0.4s;
    }
    .box1 { background: #3498DB; }
    .box2 { background: #E74C3C; }
    .box3 { background: #2ECC71; }
    .box4 { background: #F39C12; }
    .box1:hover { transform: translate(20px, -20px); }
    .box2:hover { transform: rotate(15deg); }
    .box3:hover { transform: scale(1.3); }
    .box4:hover { transform: skewX(-10deg) scale(1.1); }
  </style>
</head>
<body>
  <div class="container">
    <div class="box box1">位移</div>
    <div class="box box2">旋转</div>
    <div class="box box3">缩放</div>
    <div class="box box4">组合</div>
  </div>
</body>
</html>

2D 变换速查

函数	作用
`translate(x, y)`	位移
`translateX(x)`	水平位移
`translateY(y)`	垂直位移
`rotate(angle)`	旋转
`scale(x, y)`	缩放
`scaleX(x)`	水平缩放
`scaleY(y)`	垂直缩放
`skew(x, y)`	倾斜
`skewX(x)`	水平倾斜
`skewY(y)`	垂直倾斜
`matrix(a,b,c,d,e,f)`	矩阵变换

变换是 CSS 动画和过渡的基础。下一章的 3D 变换会在 2D 基础上增加 Z 轴，让元素具有透视和立体效果。