transform：转换
对元素进行移动、缩放、转动、拉长或拉伸。
方法：translate():
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
有两个div，它们的css样式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.before {
width
:
70px
;
height
:
70px
;
background-color
:
#8fbc8f
;
}
.after {
width
:
70px
;
height
:
70px
;
background-color
:
#ffe4c4
;
-webkit-transform: translate(
50px
,
30px
);
-moz-transform: translate(
50px
,
30px
);
-ms-transform: translate(
50px
,
30px
);
-o-transform: translate(
50px
,
30px
);
transform: translate(
50px
,
30px
);
}
|
结果如下：
rotate()
元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
有两个div，它们的css样式如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.before {
width
:
70px
;
height
:
70px
;
background-color
:
#8fbc8f
;
}
.after {
width
:
70px
;
height
:
70px
;
background-color
:
#ffe4c4
;
-webkit-transform: rotate(
20
deg);
-moz-transform: rotate(
20
deg);
-ms-transform: rotate(
20
deg);
-o-transform: rotate(
20
deg);
transform: rotate(
20
deg);
}
|
结果如下：
scale()
元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
有两个div，它们的css样式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.before {
width
:
70px
;
height
:
70px
;
background-color
:
#8fbc8f
;
}
.after {
width
:
70px
;
height
:
70px
;
background-color
:
#ffe4c4
;
-webkit-transform: scale(
1.5
,
0.8
);
/*宽度变为原来的1.5倍，高度变为原来的0.8倍*/
-moz-transform: scale(
1.5
,
0.8
);
-ms-transform: scale(
1.5
,
0.8
);
-o-transform: scale(
1.5
,
0.8
);
transform: scale(
1.5
,
0.8
);
}
|
结果如下：
skew()
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.before {
width
:
70px
;
height
:
70px
;
background-color
:
#8fbc8f
;
}
.after {
width
:
70px
;
height
:
70px
;
background-color
:
#ffe4c4
;
-webkit-transform: skew(
20
deg,
20
deg);
/*围绕 X 轴把元素翻转20度，围绕 Y 轴翻转20度*/
-moz-transform: skew(
20
deg,
20
deg);
-ms-transform: skew(
20
deg,
20
deg);
-o-transform: skew(
20
deg,
20
deg);
transform: skew(
20
deg,
20
deg);
}
|
结果如下：
transition:过渡
元素从一种样式逐渐改变为另一种的效果
有一个div，它的css样式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
div {
width
:
100px
;
height
:
100px
;
background-color
:
#87cefa
;
-webkit-transition: width
2
s;
/*时长为2s的宽度变化效果*/
-moz-transition: width
2
s;
-o-transition: width
2
s;
transition: width
2
s;
}
div:hover{
width
:
300px
;
}
|