css-transform
CSS transform 的变换函数、3D 渲染上下文、性能特性与实用场景
#status / growing
#type / concept
css-transform
Overview
CSS transform 属性允许你对元素进行变换操作，包括旋转、缩放、倾斜和平移。
常用变换函数
| 函数 | 说明 | 示例值 |
|---|---|---|
translate() | 平移元素（X, Y方向） | translate(50px, 20px) |
translateX() | 水平方向平移 | translateX(30px) |
translateY() | 垂直方向平移 | translateY(-10px) |
translateZ() | Z轴方向平移（3D） | translateZ(100px) |
translate3d() | 3D平移 | translate3d(10px, 20px, 30px) |
scale() | 缩放元素 | scale(1.5), scale(2, 0.5) |
scaleX() | 水平方向缩放 | scaleX(1.2) |
scaleY() | 垂直方向缩放 | scaleY(0.8) |
scaleZ() | Z轴方向缩放（3D） | scaleZ(2) |
rotate() | 旋转元素 | rotate(45deg) |
rotateX() | 绕X轴旋转（3D） | rotateX(30deg) |
rotateY() | 绕Y轴旋转（3D） | rotateY(60deg) |
rotateZ() | 绕Z轴旋转（3D） | rotateZ(90deg) |
skew() | 倾斜元素 | skew(30deg, 20deg) |
skewX() | 水平方向倾斜 | skewX(15deg) |
skewY() | 垂直方向倾斜 | skewY(10deg) |
matrix() | 2D矩阵变换 | matrix(1, 0, 0, 1, 0, 0) |
matrix3d() | 3D矩阵变换 | matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) |
相关属性
| 属性 | 说明 | 示例值 |
|---|---|---|
transform-origin | 变换的基点 | center, top left, 50% 50% |
transform-style | 3D变换样式 | flat, preserve-3d |
perspective | 3D透视距离 | 1000px |
perspective-origin | 透视点位置 | center, top left |
3D 渲染上下文
要使用 3D 变换，需要创建 3D 渲染上下文：
/* 父元素设置 preserve-3d，子元素的 3D 变换才会生效 */
.scene {
perspective: 1000px; /* 透视距离，值越小透视越强 */
}
.card {
transform-style: preserve-3d; /* 子元素保持 3D 空间 */
transform: rotateY(30deg);
}
.card .front {
transform: translateZ(50px); /* 向观察者方向突出 */
}
.card .back {
transform: rotateY(180deg) translateZ(50px);
}Transform 堆叠顺序
变换函数从右到左应用（类似矩阵乘法），顺序不同结果不同：
/* 先旋转再平移：沿旋转后的坐标系平移 */
.box { transform: translateX(100px) rotate(45deg); }
/* 先平移再旋转：沿原始坐标系平移，再旋转 */
.box { transform: rotate(45deg) translateX(100px); }两者视觉效果完全不同，这是常见的混淆点。
transform-origin
/* 默认值：元素中心 */
transform-origin: center; /* 等同于 50% 50% */
/* 改变旋转/缩放的基点 */
transform-origin: top left; /* 左上角 */
transform-origin: 0 0; /* 同上 */
transform-origin: 100% 100%; /* 右下角 */
transform-origin: 50% 50% 200px; /* 3D 变换的 Z 轴偏移 */性能特性
Transform 是合成器属性 (compositor-only property)：
- 不触发重排 (reflow) 和重绘 (repaint)
- 由 GPU 合成器处理，性能优异
- 适合用于动画和过渡
/* 性能对比 */
/* 差：触发重排 */
.moving { transition: left 0.3s; left: 100px; }
/* 好：仅触发合成 */
.moving { transition: transform 0.3s; transform: translateX(100px); }实用场景
居中定位
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}翻转卡片
.card { position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
.card:hover { transform: rotateY(180deg); }
.card .front, .card .back { position: absolute; backface-visibility: hidden; }
.card .back { transform: rotateY(180deg); }悬浮效果
.hover-lift {
transition: transform 0.2s, box-shadow 0.2s;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}