CSS 变换

transform 让你在二维或三维空间中移动、旋转、缩放、倾斜元素——而不影响文档流。它是实现微交互、动效和视觉设计的基础工具。

二维变换

translate — 平移

将元素从当前位置移动：

css 
/* 向右 20px，向下 10px */
.move { transform: translate(20px, 10px); }

/* 单值：仅水平方向 */
.move-x { transform: translateX(20px); }
.move-y { transform: translateY(-10px); }

正值向右/向下，负值向左/向上。百分比是相对于元素自身尺寸（而非父元素）：

css 
/* 绝对居中（配合 absolute/fixed） */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

rotate — 旋转

css 
.rotate { transform: rotate(45deg); }   /* 顺时针 45° */
.rotate-neg { transform: rotate(-30deg); } /* 逆时针 30° */

单位：deg（度），也用 turn（圈）：rotate(0.5turn) 等于 180deg。

scale — 缩放

css 
.zoom { transform: scale(1.2); }       /* 放大 1.2 倍 */
.shrink { transform: scale(0.8); }      /* 缩小到 80% */
.stretch { transform: scale(1.5, 0.8); } /* 宽 1.5 倍，高 0.8 倍 */

缩放基准点默认是元素中心，可通过 transform-origin 修改。

skew — 倾斜

css 
.skew-x { transform: skewX(10deg); }
.skew-y { transform: skewY(5deg); }
.skew-both { transform: skew(10deg, 5deg); }

多重变换

多个变换用空格分隔，从右向左执行：

css 
.card:hover {
  transform: translateY(-4px) scale(1.05);
  /* 先放大，再上移 */
}

多重变换不能分开写两条 transform 属性——后面的会覆盖前面的。你需要把多个变换函数合写在一条声明里。

transform-origin — 变换原点

控制变换的参考点，默认为 50% 50%（元素中心）：

css 
/* 从左上角旋转 */
.rotate-corner {
  transform-origin: top left;
  transform: rotate(15deg);
}

/* 从底边中心缩放 */
.scale-bottom {
  transform-origin: bottom center;
  transform: scaleY(0.5);
}

三维变换

在二维修正的基础上增加 Z 轴：

css 
/* 3D 旋转 */
.rotate3d-x { transform: rotateX(45deg); }
.rotate3d-y { transform: rotateY(45deg); }
.rotate3d-z { transform: rotateZ(45deg); } /* 等价于 rotate() */

/* 3D 平移 */
.translate3d { transform: translateZ(100px); }

/* 3D 透视（加在父元素上） */
.scene {
  perspective: 600px; /* 透视距离，越小越夸张 */
}
css 
/* 卡片翻转效果 */
.card-container {
  perspective: 800px;
}
.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card-inner.flipped {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  position: absolute;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
html 
<div class="card-container" style="width:200px;height:120px">
  <div class="card-inner" style="width:100%;height:100%">
    <div class="card-front" style="width:100%;height:100%;background:#2563eb;display:flex;align-items:center;justify-content:center;color:white">正面</div>
    <div class="card-back" style="width:100%;height:100%;background:#ef4444;display:flex;align-items:center;justify-content:center;color:white">背面</div>
  </div>
</div>

变换与性能

transform 是渲染性能最高的 CSS 属性之一——变换只发生在合成阶段（compositing），浏览器不需要重新计算布局（reflow）或重新绘制（repaint）。这就是为什么动画库和框架几乎都基于 transform 和 opacity 来做动效。

css 
/* ✅ 高性能：60fps 动画 */
.smooth-move {
  transition: transform 0.3s ease;
}

/* ❌ 低性能：可能掉帧 */
.janky-move {
  transition: left 0.3s ease; /* left 触发重排 */
}

变换与文档流

transform 的一个重要特性：它不改变文档流。元素变换后的视觉位置移动了，但它在布局中的”原位置”仍然保持不变，周围的元素不会因为你的 translate 而重新排列。

这与 position: relative + left/top 的行为类似，但 transform 的性能远优于后者。

常用变换效果

css 
/* 悬浮上浮 */
.card { transition: transform 0.2s ease; }
.card:hover { transform: translateY(-4px); }

/* 悬浮放大 */
.icon { transition: transform 0.2s ease; }
.icon:hover { transform: scale(1.2); }

/* 轻微旋转装饰 */
.tag { transform: rotate(-2deg); }

/* 加载动画 */
.spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}