CSS: 变换 transform
最后更新：2026-10-13
transform 属性用于对元素进行变换操作，比如旋转、缩放、倾斜和平移。它允许你通过简单的声明式语法实现复杂的视觉效果，而无需依赖 JavaScript。
变换属性速查表
| 属性/函数 | 常用值 | 作用 |
|---|---|---|
transform |
多个函数用空格分隔 | 对元素应用 2D/3D 变换 |
translate(x, y) |
50px, -30px, 50% |
位移（正值右/下） |
translateX(x) |
50px |
水平位移 |
translateY(y) |
-30px |
垂直位移 |
scale(n) |
1.5, 2, 0.5 |
缩放（1=原大小） |
scaleX(n) |
1.5 |
水平缩放 |
scaleY(n) |
0.8 |
垂直缩放 |
rotate(deg) |
45deg, 90deg, -180deg |
旋转（正=顺时针） |
skew(x, y) |
10deg, -5deg |
倾斜变形 |
skewX(deg) |
10deg |
水平倾斜 |
skewY(deg) |
10deg |
垂直倾斜 |
transform-origin |
center, top left, 50% 50% |
变换原点位置 |
1. 基本语法
▶ 示例
▶ 试一试可以同时应用多个变换函数，用空格分隔，浏览器会按顺序依次处理。
(1) 综合示例：各种变换效果
HTML
<style>
.box {
width: 150px;
height: 100px;
background: rgba(255, 99, 71, 0.6);
border: 2px solid;
margin-bottom: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.scale-0-5 { transform: scale(0.5); }
.scale-1-2 { transform: scale(1.2); }
.translateX { transform: translateX(50px); }
.translateY { transform: translateY(50px); }
.rotate45 { transform: rotate(45deg); }
.skewX-45 { transform: skewX(45deg); }
.skewY-45 { transform: skewY(45deg); }
</style>
<div class="container">
<div class="box">原始元素</div>
<div class="box scale-0-5">scale(0.5)</div>
<div class="box scale-1-2">scale(1.2)</div>
<div class="box translateX">translateX(50px)</div>
<div class="box translateY">translateY(50px)</div>
<div class="box rotate45">rotate(45deg)</div>
<div class="box skewX-45">skewX(45deg)</div>
<div class="box skewY-45">skewY(45deg)</div>
</div>
💡 观察要点： 缩放会改变元素尺寸，位移不会，旋转和倾斜只改变视觉形态。
2. 位移 translate
💡 性能优势：
transform: translate() 比用 top/left 做位移性能更好——因为 transform 只触发合成（composite）阶段，不触发布局（layout）和绘制（paint）。动画场景优先用 transform。
(1) translate()
▶ 示例
▶ 试一试- 正值：向右/向下移动
- 负值：向左/向上移动
- 支持 px、%、em 等单位
- 百分比相对于元素自身的尺寸
(2) translateX / translateY / translateZ
▶ 示例
▶ 试一试(3) translate3d
▶ 示例
▶ 试一试注意：Z轴移动必须配合父容器的 perspective 属性才能看到效果。
3. 缩放 scale
📌 hover 缩放效果：
transform: scale(1.1) 配合 transition 能做出按钮悬停放大的效果。但不要设太大（1.5 以上会模糊），1.05~1.15 是最舒适的范围。
(1) scale()
▶ 示例
▶ 试一试- 1 = 不变
-
1 = 放大
- 0~1 = 缩小
- 负值 = 翻转 + 缩放
- 参数是无单位的纯数字
(2) scaleX / scaleY / scale3d
▶ 示例
▶ 试一试4. 旋转 rotate
(1) rotate()
▶ 示例
▶ 试一试(2) rotateX / rotateY / rotateZ
▶ 示例
▶ 试一试(3) rotate3d
▶ 示例
▶ 试一试5. 倾斜 skew
(1) skew()
▶ 示例
▶ 试一试▶ 示例
▶ 试一试6. 其他变换相关属性
(1) transform-origin（变换原点）
默认变换中心是元素的中心点（50% 50%），可以通过 transform-origin 更改：
▶ 示例
▶ 试一试(2) perspective（透视）
为 3D 变换添加深度感：
▶ 示例
▶ 试一试数值越小，透视效果越强烈（近大远小）。
(3) backface-visibility（背面可见性）
▶ 示例
▶ 试一试(4) transform-style（3D渲染）
▶ 示例
▶ 试一试7. 多个变换的组合
多个变换函数按从右到左的顺序执行（注意是反序的）：
▶ 示例
▶ 试一试提示：位移通常写在最前面（从代码看是最后执行），避免旋转或缩放后坐标轴改变导致位移方向异常。
❓ 常见问题
Q transform 和直接改 top/left 有什么区别？
A transform 只触发合成（composite）阶段，不触发布局和绘制，性能更好。而修改 top/left 会触发重排（reflow），导致页面卡顿。动画场景优先用 transform。
Q transform: translate(-50%, -50%) 配合 position: absolute 能达到什么效果？
A 这是垂直水平居中的经典方案。
top: 50%; left: 50%; transform: translate(-50%, -50%); 先把元素左上角定位到父容器中心，再用 translate 往回移动自身宽高的一半，实现完美居中。Q transform 的 3D 方法需要特殊设置吗？
A 使用
translateZ()、rotateX()、rotateY() 等 3D 方法时，建议在父容器上加 perspective 属性（如 perspective: 1000px），否则 3D 效果可能不明显。3D 变换会触发 GPU 加速，性能比 2D 更好。📖 小节
transform是 CSS 动效的基础——位移、缩放、旋转、倾斜四种基本变换可以组合出无数效果- 变换不会影响文档流（元素"看起来"变了，但占据的空间不变）
- 3D 变换需要配合
perspective才能看到深度效果 - 多个变换函数组合时注意执行顺序，位移建议放在最后（代码顺序的最前面）
📝 作业
- 创建一个方块元素，鼠标悬停时向右平移 50px 并放大 1.5 倍。
- 创建一个图片，鼠标悬停时绕 Y 轴旋转 180 度（需要设置
perspective）。 - 创建一个"翻转卡片"——鼠标悬停时卡片正面翻转显示背面内容（使用
rotateY和backface-visibility）。 - 使用
transform-origin改变旋转中心，制作一个"钟摆"效果的元素。
