2D 转换
translate/rotate/scale/skew/matrix 2D 变换函数
2D 转换
transform 让元素旋转、缩放、平移、倾斜——不改变文档流。
学完本章你将： 掌握 translate/rotate/scale/skew 2D 变换。
四种变换
css
/* 平移 translate */
.move { transform: translate(50px, 20px); } /* 右移 50，下移 20 */
.move-x { transform: translateX(50px); } /* 只用 X */
.move-y { transform: translateY(-20px); } /* 只用 Y（负值=向上） */
/* 旋转 rotate（顺时针度数） */
.rotate { transform: rotate(45deg); }
.rotate-neg { transform: rotate(-30deg); }
/* 缩放 scale（1=原始大小） */
.scale-up { transform: scale(1.2); } /* 放大 20% */
.scale-down { transform: scale(0.8); } /* 缩小 */
.scale-x { transform: scaleX(1.5); } /* 只拉宽 */
/* 倾斜 skew */
.skew-x { transform: skewX(20deg); }
.skew-y { transform: skewY(10deg); }组合变换
css
/* 多个变换用空格分隔——顺序影响结果 */
.combined {
transform: translate(100px, 0) rotate(45deg) scale(1.2);
}配合过渡
css
.box {
transition: transform 0.3s;
}
.box:hover {
transform: scale(1.1); /* 悬停放大 */
}