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;
}