css3 2d转换transform详细解析与代码实例transform
CSS3 Transform是CSS3的一个模块，其目的是为了通过对元素的变形、旋转、缩放、平移等操作，能够更加丰富的展示页面效果。下面是CSS3 Transform的详细解析与代码实例：
transform属性
transform属性用于对元素进行变形操作，其属性值可以是一种或多种变形函数。常用的变形函数有：translate、rotate、scale、skew等。
以下是transform属性的语法格式：
transform: none|transform-functions;
transform属性既可以单独写也可以与其他属性一起写，如下所示：
div {transform: rotate(30deg) scale(0.5);-webkit-transform: rotate(30deg) scale(0.5); /* Safari 和 Chrome */-moz-transform: rotate(30deg) scale(0.5); /* Firefox */-ms-transform: rotate(30deg) scale(0.5); /* IE 9 */-o-transform: rotate(30deg) scale(0.5); /* Opera */
}
变形函数
translate函数
translate函数用于对元素进行平移操作，其参数可以是一个或两个，分别表示水平和垂直方向的平移距离，语法格式如下：
transform:translate(tx,ty);
其中，tx表示水平方向的平移距离，ty表示垂直方向的平移距离，单位可以是px、em、rem等。
代码实例：
div {transform: translate(50px, 100px);
}
rotate函数
rotate函数用于对元素进行旋转操作，其参数表示旋转角度，语法格式如下：
transform:rotate(angle);
其中，angle表示旋转角度，可以是正数（顺时针方向）或负数（逆时针方向），单位为deg（度数）。
代码实例：
div {transform: rotate(30deg);
}
scale函数
scale函数用于对元素进行缩放操作，其参数表示缩放比例，语法格式如下：
transform:scale(sx,sy);
其中，sx表示水平方向的缩放比例，sy表示垂直方向的缩放比例，参数可以是小数、整数或百分数。
代码实例：
div {transform: scale(0.5);
}
skew函数
skew函数用于对元素进行倾斜操作，其参数表示倾斜角度，语法格式如下：
transform: skew(ax,ay);
其中，ax表示水平方向的倾斜角度，ay表示垂直方向的倾斜角度，可以是正数或负数，单位为deg（度数）。
代码实例：
div {transform: skew(20deg, 10deg);
}
matrix函数
matrix函数用于对元素进行任意变形操作，其参数为一个矩阵，语法格式如下：
transform: matrix(a,b,c,d,e,f);
其中，a、b、c、d、e、f分别表示矩阵的六个值，用于对元素进行变形，具体计算方式与数学中的矩阵变换相同。
代码实例：
div {transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}
transform-origin属性
transform-origin属性用于设置元素变形的基点位置，默认值为元素的中心点，可以设置为左上角、右上角、左下角、右下角等位置。
以下是transform-origin属性的语法格式：
transform-origin: x-axis y-axis z-axis;
其中，x-axis表示水平方向的基点位置，可以是left、center、right、%等值，y-axis表示垂直方向的基点位置，z-axis表示基点位置在z轴（3D场景）上的位置，默认值为0。
代码实例：
div {transform-origin: left top;
}