Skip to content

Commit efbb629

Browse files
author
Li Xinyang
committed
add sample css transform code
1 parent 40bdec9 commit efbb629

File tree

1 file changed

+185
-0
lines changed

1 file changed

+185
-0
lines changed

‎SampleCode/CSS/Transform2D.html‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Transform 2D</title>
7+
<style type="text/css">
8+
body {
9+
margin: 50px;
10+
text-align: center;
11+
position: relative;
12+
margin: ;
13+
100px 0;
14+
}
15+
16+
.container {
17+
position: relative;
18+
margin: 100px 0;
19+
display: inline-block;
20+
}
21+
22+
.box {
23+
width: 150px;
24+
height: 150px;
25+
border: 3px solid black;
26+
background-color: rgba(138, 161, 64, .5);
27+
}
28+
29+
.box-origin {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<h1>Transform 2D</h1>
39+
<h3>可忽略所有<code>:after</code>的样式</h3>
40+
<h2>transform (translate & rotate)</h2>
41+
<div class="container">
42+
<div id="box1" class="box"></div>
43+
<div id="box1-clone" class="box box-origin"></div>
44+
<p>translate(50%) -> rotate(45deg)</p>
45+
</div>
46+
<br>
47+
<style type="text/css">
48+
#box1 {
49+
transform: translate(50%) rotate(45deg);
50+
}
51+
52+
#box1:after {
53+
background: RED;
54+
width: 15px;
55+
height: 15px;
56+
position: absolute;
57+
left: 50%;
58+
top: 50%;
59+
content: "";
60+
border-radius: 50%;
61+
transform: translate(-50%, -50%);
62+
}
63+
</style>
64+
<div class="container">
65+
<div id="box2" class="box"></div>
66+
<div class="box box-origin"></div>
67+
<p>rotate(45deg) -> translate(50%)</p>
68+
</div>
69+
<br>
70+
<style type="text/css">
71+
#box2 {
72+
transform: rotate(45deg) translate(50%);
73+
}
74+
75+
#box2:after {
76+
background: RED;
77+
width: 15px;
78+
height: 15px;
79+
position: absolute;
80+
left: 50%;
81+
top: 50%;
82+
content: "";
83+
border-radius: 50%;
84+
transform: translate(-50%, -50%);
85+
}
86+
</style>
87+
<h2>translate-origin</h2>
88+
<div class="container">
89+
<div id="box3" class="box"></div>
90+
<div class="box box-origin"></div>
91+
<p>transform-origin: 100% 100%</p>
92+
</div>
93+
<br>
94+
<style type="text/css">
95+
#box3 {
96+
transform-origin: 100% 100%;
97+
transform: rotate(45deg);
98+
}
99+
100+
#box3:after {
101+
background: RED;
102+
width: 15px;
103+
height: 15px;
104+
position: absolute;
105+
left: 100%;
106+
top: 100%;
107+
content: "";
108+
border-radius: 50%;
109+
transform: translate(-50%, -50%);
110+
}
111+
</style>
112+
<h3>scale</h3>
113+
<div class="container">
114+
<div id="box4" class="box"></div>
115+
<div class="box box-origin"></div>
116+
<p>scale(0.5)</p>
117+
</div>
118+
<br>
119+
<style type="text/css">
120+
#box4 {
121+
transform: scale(0.5);
122+
}
123+
124+
#box4:after {
125+
background: RED;
126+
width: 15px;
127+
height: 15px;
128+
position: absolute;
129+
left: 50%;
130+
top: 50%;
131+
content: "";
132+
border-radius: 50%;
133+
transform: translate(-50%, -50%);
134+
}
135+
</style>
136+
<div class="container">
137+
<div id="box5" class="box"></div>
138+
<div class="box box-origin"></div>
139+
<p id="box-scale">rotate(45deg) scale(1.5, 2)</p>
140+
</div>
141+
<br>
142+
<style type="text/css">
143+
#box5 {
144+
transform: rotate(45deg) scale(1.5, 2);
145+
}
146+
147+
#box-scale:before {
148+
background: RED;
149+
width: 15px;
150+
height: 15px;
151+
position: absolute;
152+
left: 75px;
153+
top: 75px;
154+
content: "";
155+
border-radius: 50%;
156+
transform: translate(-50%, -50%);
157+
}
158+
</style>
159+
160+
<h3>skew</h3>
161+
<div class="container">
162+
<div id="box6" class="box"></div>
163+
<div class="box box-origin"></div>
164+
<p>skew(-45deg, 45deg)</p>
165+
</div>
166+
<br>
167+
<style type="text/css">
168+
#box6 {
169+
transform: skew(-45deg, 45deg);
170+
}
171+
#box6:after {
172+
background: RED;
173+
width: 15px;
174+
height: 15px;
175+
position: absolute;
176+
left: 50%;
177+
top: 50%;
178+
content: "";
179+
border-radius: 50%;
180+
transform: translate(-50%, -50%);
181+
}
182+
</style>
183+
</body>
184+
185+
</html>

0 commit comments

Comments
 (0)