translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html><head><style> div{100px;height:75px;background-color:red;border:1px solid black;}#div2{transform:translate(50px,100px);}</style></head><body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body></html> |
rotate() 方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html><head><style> div{100px;height:75px;background-color:red;border:1px solid black;}div#div2{transform:rotate(45deg);}</style></head><body><div>你好。这是一个 DIV 元素。</div><div id="div2">你好。这是一个 DIV 元素。</div></body></html> |
scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html><head><style> div{100px;height:75px;background-color:red;border:1px solid black;}div#div2{margin:100px;transform:scale(2,4);}</style></head><body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body></html> |
skew() 方法
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html><head><style> div{100px;height:75px;background-color:red;border:1px solid black;}div#div2{transform:skew(30deg,20deg)}</style></head><body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body></html> |
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html><head><style> div{100px;height:75px;background-color:red;border:1px solid black;}div#div2{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}</style></head><body><div>Hello. This is a DIV element.</div><div id="div2">Hello. This is a DIV element.</div></body></html> |
新转换属性
以下列出了所有的转换属性:
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
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 轴。 |