Recently, the development speed of HTML5 and CSS3 is still very impressive. There are many big and cool websites at home and abroad using the latest technology. In the face of new technologies, how should we correctly grasp and use them in future actual projects? In response to this problem, Haozi decided to analyze CSS3 and explain to the students one by one what a magical thing CSS3 is. Let’s just transform start. If you don’t write well, please give it a try! !
The meaning of transform is: change, deform...; transform
The properties of transform include: rotate() / skew() / scale() / translate(,), which are divided into x and y respectively, such as: rotatex() and rotatey(), and so on. .
Let’s break down the usage of each attribute:
Meaning: rotation; where "deg" means "degree", such as " "10deg" means "10 degrees", the same below.
##transform:skew(): Meaning: skew;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
demo_transform
1
{
-webkit-transform
:
rotate
(
10
deg
)
;
-moz-transform
:
rotate
(
10
deg
)
}
Copy after login
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
##transform:scale():
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
demo_transform
4
{
-webkit-transform
:
translate
(
120px
,
0
)
;
-moz-transform
:
translate
(
120px
,
0
)
}
Copy after login
transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.
demo_transform
5
{
-webkit-transition
:
all
1
s
ease-in-out
;
-moz-transition
:
all
1
s
ease-in-out
}
.
demo_transform
5
:
hover
{
-webkit-transform
:
rotate
(
360
deg
)
skew
(
-20
deg
)
scale
(
3
.
0
)
translate
(
100px
,
0
)
;
-moz-transform
:
rotate
(
360
deg
)
skew
(
-20
deg
)
scale
(
3
.
0
)
translate
(
100px
,
0
)
}
Copy after login
The above is the detailed content of Detailed introduction to transform in CSS3. For more information, please follow other related articles on the PHP Chinese website!