CSS3的2D变形是前端布局与动效实现的重要技术，通过transform属性可以让元素在二维平面内完成多种形态变化，不需要额外引入图片或脚本就能实现丰富的视觉效果，大幅降低了页面开发的复杂度。
CSS3 2D变形的基础属性
所有2D变形都通过transform属性实现，该属性接收一个或多个变形函数作为参数，多个函数之间用空格分隔，浏览器会按照从左到右的顺序依次执行变形操作。默认情况下，变形的原点是元素的中心点，也可以通过transform-origin属性自定义原点位置，该属性接收水平方向和垂直方向的偏移值，比如transform-origin: left top表示以元素左上角为变形原点。
常见的2D变形类型
1. 位移变形 translate
位移变形可以让元素在水平或垂直方向移动指定距离，有两个常用函数：
translateX(x)：仅在水平方向移动元素，x为正则向右，为负则向左translateY(y)：仅在垂直方向移动元素，y为正则向下，为负则向上- 也可以使用简写函数
translate(x, y)，同时设置水平和垂直位移，如果只传一个参数，默认第二个参数为0
位移的值可以是像素、百分比等单位，百分比是相对于元素自身的宽高计算，比如translateX(50%)表示向右移动元素自身宽度的一半。
/* 位移变形示例 */
.box {
width: 100px;
height: 100px;
background: #409eff;
/* 向右移动20px，向下移动30px */
transform: translate(20px, 30px);
/* 自定义变形原点为左上角 */
transform-origin: left top;
}
2. 旋转变形 rotate
旋转变形可以让元素围绕变形原点顺时针或逆时针旋转指定角度，使用rotate(angle)函数，角度单位常用deg（度），正值为顺时针旋转，负值为逆时针旋转。
/* 旋转变形示例 */
.box {
width: 100px;
height: 100px;
background: #67c23a;
/* 顺时针旋转45度 */
transform: rotate(45deg);
}
3. 缩放变形 scale
缩放变形可以改变元素的尺寸大小，有两个常用函数：
scaleX(x)：仅水平方向缩放，x为缩放倍数，1为原始大小，小于1缩小，大于1放大scaleY(y)：仅垂直方向缩放，规则同scaleX- 简写函数
scale(x, y)同时设置水平和垂直缩放，只传一个参数时，水平和垂直缩放倍数相同
缩放变形不会改变元素在文档流中的占位空间，只是视觉上的尺寸变化。
/* 缩放变形示例 */
.box {
width: 100px;
height: 100px;
background: #e6a23c;
/* 水平放大1.5倍，垂直缩小0.5倍 */
transform: scale(1.5, 0.5);
}
4. 倾斜变形 skew
倾斜变形可以让元素在水平或垂直方向产生倾斜效果，常用函数：
skewX(angle)：水平方向倾斜，元素顶部向右侧偏移的角度skewY(angle)：垂直方向倾斜，元素左侧向下偏移的角度- 简写函数
skew(x-angle, y-angle)同时设置水平和垂直倾斜，只传一个参数时，垂直倾斜为0
/* 倾斜变形示例 */
.box {
width: 100px;
height: 100px;
background: #f56c6c;
/* 水平倾斜30度 */
transform: skewX(30deg);
}
5. 矩阵变形 matrix
矩阵变形是2D变形的底层实现方式，上述所有变形都可以通过matrix(a, b, c, d, e, f)函数组合实现，六个参数对应变形矩阵的数值，实际开发中较少直接使用，更多是用上面的简写函数。
多变形叠加的注意事项
当多个变形函数同时作用于一个元素时，执行顺序会影响最终效果，因为每次变形都是基于上一次变形后的坐标系。比如先位移再旋转和先旋转再位移，最终元素的位置会完全不同。
/* 多变形叠加示例 */
.box1 {
transform: translate(50px, 0) rotate(45deg);
}
.box2 {
transform: rotate(45deg) translate(50px, 0);
}
上面的两个示例中，box1是先向右移动50px再旋转45度，box2是先旋转45度再按照旋转后的坐标系向右移动50px，最终两个元素的位置会有明显差异。
变形对元素的影响
2D变形不会改变元素在文档流中的原始占位，也不会影响其他元素的布局位置，只会改变元素自身的视觉呈现。如果需要对变形后的元素做动画效果，可以结合transition属性实现平滑过渡。
/* 带过渡的变形示例 */
.box {
width: 100px;
height: 100px;
background: #909399;
transition: transform 0.3s ease;
}
.box:hover {
transform: translateY(-10px) scale(1.1);
}
上面的代码实现了鼠标悬停时元素向上移动10px并放大1.1倍，过渡时间0.3秒的平滑效果。