面试题：CSS3 中的 transform 有哪些属性？
transform 是 CSS3 中用于对元素进行变形的强大属性，它可以在不改变文档流的情况下，对元素进行平移、旋转、缩放、倾斜等操作，广泛应用于动画、交互效果和响应式设计中。
一、transform 的基本语法
.element {
transform: function1() function2() ...;
}可以同时应用多个变换函数，按从左到右的顺序依次执行。
二、transform 的常用函数（属性）
✅ 1. 2D 变换函数
| 函数 | 描述 | 示例 |
|---|---|---|
translate(x, y) | 在 X 和 Y 轴上平移元素 | transform: translate(50px, 20px); |
translateX(x) | 仅在 X 轴平移 | transform: translateX(100px); |
translateY(y) | 仅在 Y 轴平移 | transform: translateY(-30px); |
scale(sx, sy) | 在 X 和 Y 轴缩放（1.0 为原大小） | transform: scale(1.5, 0.8); |
scaleX(sx) | 仅在 X 轴缩放 | transform: scaleX(2); |
scaleY(sy) | 仅在 Y 轴缩放 | transform: scaleY(0.5); |
rotate(angle) | 旋转元素（单位：deg、rad） | transform: rotate(45deg); |
skew(ax, ay) | 在 X 和 Y 轴倾斜（扭曲） | transform: skew(10deg, 5deg); |
skewX(ax) | 仅在 X 轴倾斜 | transform: skewX(20deg); |
skewY(ay) | 仅在 Y 轴倾斜 | transform: skewY(15deg); |
🔹
translate不影响其他元素布局（脱离正常流感知）
🔹rotate默认以元素中心为旋转点
✅ 2. 3D 变换函数
要使用 3D 变换，需先设置 transform-style: preserve-3d 和 perspective。
| 函数 | 描述 | 示例 |
|---|---|---|
translateZ(z) | 在 Z 轴平移（靠近或远离屏幕） | transform: translateZ(50px); |
translate3d(x, y, z) | 同时在 X、Y、Z 轴平移 | transform: translate3d(10px, 20px, 30px); |
scaleZ(sz) | 在 Z 轴缩放 | transform: scaleZ(1.5); |
scale3d(sx, sy, sz) | 在三个轴上缩放 | transform: scale3d(1.2, 1.0, 0.8); |
rotateX(angle) | 绕 X 轴旋转（翻转） | transform: rotateX(45deg); |
rotateY(angle) | 绕 Y 轴旋转（翻书效果） | transform: rotateY(60deg); |
rotateZ(angle) | 绕 Z 轴旋转（等同于 rotate()） | transform: rotateZ(30deg); |
rotate3d(x, y, z, angle) | 按自定义向量旋转 | transform: rotate3d(1, 1, 0, 45deg); |
perspective(length) | 为元素或子元素设置透视距离 | transform: perspective(500px) rotateY(45deg); |
🔹
perspective控制 3D 效果的“景深”，值越小，透视感越强
🔹transform-style: preserve-3d用于保持子元素的 3D 空间
三、相关 CSS 属性（面试加分点）
除了 transform 本身，还有几个关键属性配合使用：
| 属性 | 作用 |
|---|---|
transform-origin | 定义变换的原点（默认是元素中心） 如： transform-origin: top left; 或 transform-origin: 50% 50%; |
transform-style | 控制子元素是否在 3D 空间中渲染flat（默认）或 preserve-3d |
perspective | 设置透视距离，影响 3D 元素的视觉深度 通常作用于父容器： perspective: 1000px; |
perspective-origin | 定义透视的观察点（默认是中心） 如： perspective-origin: center bottom; |
backface-visibility | 控制元素背面是否可见visible 或 hidden（常用于翻转卡片） |
四、常见使用场景
| 场景 | 使用的 transform 函数 |
|---|---|
| 按钮悬停放大 | scale(1.05) |
| 元素平移动画 | translateX(100px) |
| 旋转图标（如加载动画） | rotate(360deg) |
| 卡片翻转效果 | rotateY(180deg) + preserve-3d |
| 3D 旋转轮播 | rotateY() + translateZ() |
| 倾斜导航菜单 | skewX(10deg) |
五、注意事项
- 硬件加速：
transform会触发 GPU 加速，性能优于直接修改top/left。 - 不影响文档流：变换后的元素仍占据原始空间。
- 组合使用：多个函数可链式调用，注意执行顺序。
- 浏览器兼容性：现代浏览器支持良好，老版本需加前缀（如
-webkit-transform）。
💬 一句话总结：
“
transform提供了丰富的 2D 和 3D 变换能力，包括平移、旋转、缩放、倾斜等函数，配合transform-origin、perspective等属性，可实现高性能的视觉效果和交互动画。”
在面试中，能结合 动画、3D 卡片翻转、性能优化 等实际场景说明，会显得你具备实战经验。
THE END
