CSS 变换与 3D
css · intermediate · 25-30 min · Step 1/5CSS Transform 变换
Transform 让元素在不影响其他元素的情况下进行视觉变换。
.card:hover {
transform: translateY(-8px) scale(1.02);
/* 向上浮起 8px + 放大 2% */
}
常用变换函数
| 函数 | 用途 | 示例 |
|---|---|---|
| translate(x, y) | 平移 | translateY(-10px) |
| rotate(deg) | 旋转 | rotate(45deg) |
| scale(n) | 缩放 | scale(1.1) |
| skew(deg) | 倾斜 | skewX(5deg) |
transform-origin
默认变换中心是元素中心点，可以修改：
transform-origin: top left; /* 左上角为中心 */
transform-origin: 50% 100%; /* 底部中心 */
Transform 不会触发 layout reflow，性能极好，适合做动画。