-
Notifications
You must be signed in to change notification settings - Fork 108
/
Copy pathCSS3 2D动画旋转.html
88 lines (73 loc) · 1.36 KB
/
CSS3 2D动画旋转.html
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS3 2D动画旋转</title>
<style>
div {
margin: 50px;
height: 90px;
width: 90px;
background: gray;
}
.r1 {
transform: rotate(30deg);
}
.r2 {
transform: rotate(-30deg);
}
.t1 {
transform: translate(-50px)
}
.t2 {
transform: translate(50px)
}
.t3 {
transform: translate(50px, 50px)
}
.s1 {
margin-top: 100px;
transform: scale(2)
}
.s2 {
margin-top: 100px;
transform: scale(-2)
}
.s3 {
transform: scale(0.5)
}
.s4 {
transform: scale(-0.5)
}
.sk1 {
transform: skew(30deg)
}
.sk2 {
transform: skew(-30deg)
}
.sk3 {
transform: skew(30deg, -30deg)
}
.sk4 {
transform: skew(-30deg, 30deg)
}
.m {
transform: matrix(1, 0, 0, 1, 30, 30);
}
</style>
</head>
<body>
<div>参照物</div>
<div class="r1">rotate1</div>
<div class="r2">rotate2</div>
<div class="t1">translate1</div>
<div class="t2">translate2</div>
<div class="t3">translate3</div>
<div class="s1">scale1</div>
<div class="s2">scale2</div>
<div class="sk1">skew1</div>
<div class="sk2">skew2</div>
<div class="m">matrix</div>
</body>
</html>