CSS: 变换 transform

Q: transform: translate(-50%, -50%) 配合 position: absolute 能达到什么效果？

这是垂直水平居中的经典方案。 top: 50%; left: 50%; transform: translate(-50%, -50%); 先把元素左上角定位到父容器中心，再用 translate 往回移动自身宽高的一半，实现完美居中。

Q: transform 的 3D 方法需要特殊设置吗？

使用 translateZ() 、 rotateX() 、 rotateY() 等 3D 方法时，建议在父容器上加 perspective 属性（如 perspective: 1000px ），否则 3D 效果可能不明显。3D 变换会触发 GPU 加速，性能比 2D 更好。

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. 基本语法

▶ 示例

HTML

<style>
.element {
  transform: function(value) [function(value) ...];
}
</style>
<div class="element">这是一个示例元素</div>
<div class="transform-demo">变换演示元素</div>

▶ 试一试

可以同时应用多个变换函数，用空格分隔，浏览器会按顺序依次处理。

(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()

▶ 示例

HTML

<style>
.box {
  transform: translate(50px, 30px);   /* 向右50px，向下30px */
  transform: translate(50px);         /* 只给一个值，第二个默认为0 */
  transform: translate(-50px, -30px); /* 向左50px，向上30px */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

正值：向右/向下移动
负值：向左/向上移动
支持 px、%、em 等单位
百分比相对于元素自身的尺寸

(2) translateX / translateY / translateZ

▶ 示例

HTML

<style>
.box {
  transform: translateX(50px);  /* 水平移动 */
  transform: translateY(30px);  /* 垂直移动 */
  transform: translateZ(100px); /* 深度移动（需开启3D透视） */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

(3) translate3d

▶ 示例

HTML

<style>
.box {
  transform: translate3d(50px, 30px, 100px);  /* X, Y, Z 三个方向 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

注意：Z轴移动必须配合父容器的 perspective 属性才能看到效果。

3. 缩放 scale

📌 hover 缩放效果： transform: scale(1.1) 配合 transition 能做出按钮悬停放大的效果。但不要设太大（1.5 以上会模糊），1.05~1.15 是最舒适的范围。

(1) scale()

▶ 示例

HTML

<style>
.box {
  transform: scale(1.5);          /* 放大到1.5倍 */
  transform: scale(0.5);          /* 缩小到一半 */
  transform: scale(1.2, 0.8);     /* 宽放大1.2倍，高缩小到0.8倍 */
  transform: scale(-1, 1);        /* 水平翻转 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

1 = 不变
1 = 放大
0~1 = 缩小
负值 = 翻转 + 缩放
参数是无单位的纯数字

(2) scaleX / scaleY / scale3d

▶ 示例

HTML

<style>
.box {
  transform: scaleX(2);     /* X方向放大2倍 */
  transform: scaleY(0.5);   /* Y方向缩小一半 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

4. 旋转 rotate

(1) rotate()

▶ 示例

HTML

<style>
.box {
  transform: rotate(45deg);    /* 顺时针旋转45度 */
  transform: rotate(-90deg);   /* 逆时针旋转90度 */
  transform: rotate(0.5turn);  /* 半圈（180度） */
  transform: rotate(1turn);    /* 一整圈 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

(2) rotateX / rotateY / rotateZ

▶ 示例

HTML

<style>
.box {
  transform: rotateX(180deg);  /* 绕X轴翻转（上下翻转） */
  transform: rotateY(45deg);   /* 绕Y轴旋转（左右翻转） */
  transform: rotateZ(90deg);   /* 绕Z轴旋转（同普通rotate） */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

(3) rotate3d

▶ 示例

HTML

<style>
.box {
  transform: rotate3d(1, 1, 0, 45deg);  /* 绕(1,1,0)向量旋转45度 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

5. 倾斜 skew

(1) skew()

▶ 示例

HTML

<style>
.box {
  transform: skew(30deg);         /* X轴倾斜30度 */
  transform: skew(10deg, 20deg);  /* X轴10度，Y轴20度 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

▶ 示例

HTML

<style>
.box {
  transform: skewX(30deg);  /* 水平倾斜 */
  transform: skewY(30deg);  /* 垂直倾斜 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

6. 其他变换相关属性

(1) transform-origin（变换原点）

默认变换中心是元素的中心点（50% 50%），可以通过 transform-origin 更改：

▶ 示例

HTML

<style>
.box {
  transform-origin: top left;        /* 左上角 */
  transform-origin: right bottom;    /* 右下角 */
  transform-origin: 0 0;             /* 左上角（像素） */
  transform-origin: 50% 100%;        /* 底部中间 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<span class="demo-top">顶部内容</span>
<span class="demo-right">右侧内容</span>

▶ 试一试

(2) perspective（透视）

为 3D 变换添加深度感：

▶ 示例

HTML

<style>
.parent {
  perspective: 500px;   /* 在父容器上设置透视距离 */
}

.child {
  transform: rotateY(45deg);  /* 子元素3D旋转 */
}
</style>
<div class="parent">父容器元素</div>
<div class="child">子元素内容</div>

▶ 试一试

数值越小，透视效果越强烈（近大远小）。

(3) backface-visibility（背面可见性）

▶ 示例

HTML

<style>
.card {
  backface-visibility: hidden;  /* 翻转时背面不可见 */
}
</style>
<div class="card">Card</div>

▶ 试一试

(4) transform-style（3D渲染）

▶ 示例

HTML

<style>
.parent {
  transform-style: preserve-3d;  /* 子元素保留3D位置 */
}
</style>
<div class="parent">父容器元素</div>

▶ 试一试

7. 多个变换的组合

多个变换函数按从右到左的顺序执行（注意是反序的）：

▶ 示例

HTML

<style>
.box {
  transform: translateX(50px) rotate(45deg) scale(1.2);
  /* 先缩放 → 再旋转 → 最后位移 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>

▶ 试一试

提示：位移通常写在最前面（从代码看是最后执行），避免旋转或缩放后坐标轴改变导致位移方向异常。

❓ 常见问题

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 改变旋转中心，制作一个"钟摆"效果的元素。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

CSS: 变换 transform

变换属性速查表

1. 基本语法

▶ 示例

(1) 综合示例：各种变换效果

2. 位移 translate

(1) translate()

▶ 示例

(2) translateX / translateY / translateZ

▶ 示例

(3) translate3d

▶ 示例

3. 缩放 scale

(1) scale()

▶ 示例

(2) scaleX / scaleY / scale3d

▶ 示例

4. 旋转 rotate

(1) rotate()

▶ 示例

(2) rotateX / rotateY / rotateZ

▶ 示例

(3) rotate3d

▶ 示例

5. 倾斜 skew

(1) skew()

▶ 示例

▶ 示例

6. 其他变换相关属性

(1) transform-origin（变换原点）

▶ 示例

(2) perspective（透视）

▶ 示例

(3) backface-visibility（背面可见性）

▶ 示例

(4) transform-style（3D渲染）

▶ 示例

7. 多个变换的组合

▶ 示例

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好