css3 2d转换transform详细解析与代码实例transform-CSDN博客

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