本文包含
1.CSS3中2D转换和3D转换的介绍。
2.在相册中的应用实例。
CSS3中的转换效果和动画效果十分强大好用，可以实现一些常见的动态效果。
如此一来，CSS3便可以代替许多jQuery的功能。
先来介绍一下CSS中的转换。
CSS3中转换有2D转换和3D转换之分。
2D转换(简单来说就是让某个元素改变大小和位置):
1.translate()方法
该方法包含两个参数，分别是对应的x轴，y轴偏移的距离(相对于控件的原位置进行移动)。
也可以根据translateX()方法单独设置x轴偏移量，translateY()方法设置Y轴偏移量。
2.rotate()方法
此方法包含一个参数，表示该空间以中心为圆心，顺时针转过的角度。可以为负值，表示逆时针转过的角度。
3.scale()方法
此方法包含两个参数，代表沿X轴和沿Y轴扩大的倍数。
4.skew()方法
skew()方法，该元素会根据X轴和Y轴线参数旋转给定的角度
5.matrix()方法
matrix方法将2D转换的方法合并为一个
matrix 方法有六个参数，包含旋转，缩放，移动和倾斜功能。
3D转换:
3D转换主要有一个方法。
rotateX(),rotateY(),rotateZ()。参数为一个角度值，分别围绕着X,Y,Z轴转相应的角度。
下面多介绍一个过渡属性transition:
transition：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
接下来是一个纯CSS3转换效果做的相册例子
用到多种转换方法
HTML:
<body> <div class="d_photo"> <div class="sig_photo"><img src="img/pic1.jpg" id="pic1"/></div> <div class="sig_photo"><img src="img/pic2.jpg" id="pic2"/></div> <div class="sig_photo"><img src="img/pic3.jpg" id="pic3"/></div> <div class="sig_photo"><img src="img/pic4.jpg" id="pic4"/></div> <div class="sig_photo"><img src="img/pic5.jpg" id="pic5"/></div> <div class="d_photo"> <div class="sig_photo"><img src="img/pic6.jpg" id="pic6"/></div> <div class="sig_photo"><img src="img/pic7.jpg" id="pic7"/></div> <div class="sig_photo"><img src="img/pic8.jpg" id="pic8"/></div> <div class="sig_photo"><img src="img/pic9.jpg" id="pic9"/></div> <div class="sig_photo"><img src="img/pic10.jpg" id="pic10"/></div> </div> </body>
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
黄色别墅17
18
19
20
21
22
326电影网23
24
25
26
性喜剧27
28
29
30
31
32
33
34
35
36
37
38
326影视39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
body{
width
:
100%
;
background-image
:
url
(
"img/bg.jpg"
) ;
}
.d_photo{
width
:
900px
;
height
:
180px
;
margin-top
:
10px
;
margin-left
:
auto
;
margin-right
:
auto
;
}
.sig_photo{
float
:
left
;
width
:
150px
;
height
:
150px
;
margin-top
:
20px
;
margin-left
:
20px
;
}
img{
width
:
150px
;
height
:
150px
;
-moz-transition: width
1
s,height
1
s,transform
1
s;
-webkit-transition: width
1
s,height
1
s,transform
1
s;
}
#pic
1
{
-moz-transform: rotate(
5
deg);
-webkit-transform: rotate(
5
deg);
}
#pic
2
{
-moz-transform: rotate(
-6
deg);
-webkit-transform: rotate(
-6
deg);
}
#pic
3
{
-moz-transform: rotate(
4
deg);
-webkit-transform: rotate(
4
deg);
}
#pic
4
{
-moz-transform: rotate(
-3
deg);
-webkit-transform: rotate(
-3
deg);
}
#pic
5
{
-moz-transform: rotate(
6
deg);
-webkit-transform: rotate(
-6
deg);
}
#pic
6
{
-moz-transform: rotate(
-5
deg);
-webkit-transform: rotate(
-5
deg);
}
#pic
7
{
-moz-transform: rotate(
7
deg);
-webkit-transform: rotate(
7
deg);
}
#pic
8
{
-moz-transform: rotate(
4
deg);
-webkit-transform: rotate(
4
deg);
}
#pic
9
{
-moz-transform: rotate(
-4
deg);
-webkit-transform: rotate(
-4
deg);
}
#pic
10
{
-moz-transform: rotate(
5
deg);
-webkit-transform: rotate(
5
deg);
}
#pic
1:
hover{
width
:
300px
;
height
:
350px
;
z-index
:
10
;
-moz-transform: rotate(
360
deg);
-webkit-transform:rotate(
360
deg);
}
#pic
2:
hover{
z-index
:
10
;
-moz-transform: scale(
1.15
);
-webkit-transform:scale(
1.15
);
}
#pic
3:
hover{
width
:
300px
;
height
:
350px
;
z-index
:
10
;
-moz-transform: rotate(
0
deg);
-webkit-transform: rotate(
0
deg);
}
#pic
4:
hover{
-moz-transform: rotateY(
180
deg);
-webkit-transform: rotateY(
180
deg);
z-index
:
10
;
}
#pic
5:
hover{
-moz-transform: rotateZ(
180
deg);
-webkit-transform: rotateZ(
180
deg);
z-index
:
10
;
}
#pic
6:
hover{
-moz-transform: rotateX(
180
deg);
-webkit-transform: rotateX(
180
deg);
z-index
:
10
;
}
#pic
7:
hover{
width
:
300px
;
height
:
350px
;
-moz-transform: translate(
100px
,
-170px
);
-webkit-transform: translate(
100px
,
-170px
);
z-index
:
10
;
}
#pic
8:
hover{
width
:
300px
;
height
:
350px
;
z-index
:
10
;
-moz-transform: translate(
0px
,
-170px
);
-webkit-transform: translate(
0px
,
170px
);
}
|
以上1-8每张图片，每张都是一种常用的转换方法，在此就不截图说明了，有兴趣可以试试。
扫一扫
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
