1.CSS 转换属性
属性 | 概述 |
---|---|
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许你改变被转换元素的位置 |
2.CSS 2D 转换方法
属性 | 概述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
CSS 2D 转换方法
通过使用CSS transform属性,以下是2D转换方法
translate() translate()从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数。
rotate() rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
scale() scale() 方法增加或减少元素的大小(根据给定的宽度和高度参数)。
scaleX() scaleX() 方法增加或减少元素的宽度。
scaleY() scaleY() 方法增加或减少元素的高度。
skew()
skewX() skewX() 方法使元素沿 X 轴倾斜给定角度。
skewY() skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。
matrix() matrix() 方法把所有 2D 变换方法组合为一个复合属性。matrix() 方法可接受六个参数,其中包括数学函数,这些参数可以旋转、缩放、移动(平移)和倾斜元素。
3.代码演示
1.translate()
/*下面的例子把 <div> 元素从其当前位置向右移动 100 个像素,并向下移动 200 个像素:*/
.div {
transform: translate(100px, 200px);
}
2.rotate()
/*下面的例子把 <div> 元素顺时针旋转 40 度:*/
.div {
transform: rotate(40deg);
}
/*下面的例子把 <div> 元素逆时针旋转 40 度:*/
.div {
transform: rotate(-40deg);
}
3.scale()
/*下面的例子把 <div> 元素增大为其原始宽度的二倍和其原始高度的四倍:*/
.div {
transform: scale(2, 4);
}
/*下面的例子把 <div> 元素减小为其原始宽度和高度的一半:*/
.div {
transform: scale(0.5, 0.5);
}
4.scaleX()
/*下面的例子把 <div> 元素增大为其原始宽度的两倍:*/
.div {
transform: scaleX(2);
}
/*以下例子把 <div> 元素缩减为其原始宽度的一半:*/
.div {
transform: scaleX(0.5);
}
5.scaleY()
/*下面的例子把 <div> 元素增大到其原始高度的三倍:8*/
.div {
transform: scaleY(3);
}
/*下面的例子把 <div> 元素缩减为其原始高度的一半:*/
.div {
transform: scaleY(0.5);
}
8.skew()
/*下面的例子使 <div> 元素沿 X 轴倾斜 10 度,同时沿 Y 轴倾斜 30 度:*/
.div {
transform: skew(10deg, 30deg);
}
/*如果未指定第二个参数,则值为零。因此,下例使 <div> 元素沿 X 轴倾斜 20 度:*/
.div {
transform: skew(20deg);
}
6.skewX()
/*下例把 <div> 元素沿X轴倾斜 50 度:*/
.div {
transform: skewX(50deg);
}
7.skewY()
skewY() 方法使元素沿 Y 轴倾斜给定角度。
/*下例把 <div> 元素沿 Y 轴倾斜 20 度:*/
.div {
transform: skewY(20deg);
}
9.matrix()
/*参数如下matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())*/
.div {
transform: matrix(1, -0.1, 0, 1, 0, 0);
}