Appearance
transform 常用函数
| 函数 | 作用 | 示例 |
|---|---|---|
translate(x, y) | 平移 | transform: translate(10px, 20px); |
translateX(n) | X轴平移 | transform: translateX(50%); |
translateY(n) | Y轴平移 | transform: translateY(-10px); |
scale(n) | 缩放 | transform: scale(1.5); |
rotate(deg) | 旋转 | transform: rotate(45deg); |
skew(deg) | 倾斜 | transform: skew(10deg); |
matrix() | 矩阵变形 | 不常用 |
常用组合示例
css
/* 居中（position + transform）*/
.center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* 悬浮放大 */
.card:hover {
transform: scale(1.05);
transition: 0.3s;
}
/* 旋转动画 */
.spin {
transform: rotate(360deg);
}
关键注意点
| 要点 | 说明 |
|---|---|
transform 不影响文档流 | 平移/缩放后原占位空间不变（类似 relative） |
transform 创建新层 | 会触发 GPU 加速，动画更流畅 |
与 position: fixed 冲突 | transform 会破坏 fixed 相对于视口的效果（变成相对 transform 容器） |
| 多个变换写在一起 | transform: translate(10px, 10px) rotate(45deg); 顺序影响结果 |
| 百分比参照 | translate(50%) 参照自身宽高；top/left 参照父容器 |