Skip to content

Commit 35aa5f9

Browse files
author
Li Xinyang
committed
add transform 3d sample note
1 parent 26d518e commit 35aa5f9

File tree

1 file changed

+237
-0
lines changed

1 file changed

+237
-0
lines changed

‎SampleCode/CSS/Transform3D.html‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Transfomr 3D</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 10px;
19+
display: inline-block;
20+
perspective: 500px;
21+
}
22+
23+
.box {
24+
width: 150px;
25+
height: 150px;
26+
border: 3px solid black;
27+
background-color: rgba(138, 161, 64, .5);
28+
}
29+
30+
.box-origin {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
z-index: -999;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<h1>Transform 3D</h1>
41+
<h3>可以忽略所有<code>:after</code>的样式</h3>
42+
<h2>rotate</h2>
43+
<div class="container">
44+
<div id="box1" class="box">
45+
<div id="line"></div>
46+
</div>
47+
<div class="box box-origin"></div>
48+
</div>
49+
<style type="text/css">
50+
#box1 {
51+
transform: rotateY(60deg) rotateX(0deg);
52+
}
53+
54+
#line {
55+
position: absolute;
56+
width: 2px;
57+
height: 150px;
58+
background-color: RED;
59+
left: 73px;
60+
}
61+
</style>
62+
<h2>perspective-origin</h2>
63+
<div class="container" id="container-1">
64+
<div id="box2" class="box"></div>
65+
<div class="box box-origin"></div>
66+
<p>top</p>
67+
</div>
68+
<div class="container" id="container-2">
69+
<div id="box3" class="box"></div>
70+
<div class="box box-origin"></div>
71+
<p>50% 50%</p>
72+
</div>
73+
<div class="container" id="container-3">
74+
<div id="box4" class="box"></div>
75+
<div class="box box-origin"></div>
76+
<p>bottom</p>
77+
</div>
78+
<style type="text/css">
79+
#box2,
80+
#box3,
81+
#box4 {
82+
transform: rotateY(45deg);
83+
}
84+
85+
#container-1 {
86+
perspective-origin: 0 0;
87+
}
88+
89+
#container-2 {
90+
perspective-origin: 50% 50%;
91+
}
92+
93+
#container-3 {
94+
perspective-origin: 100% 100%;
95+
}
96+
</style>
97+
<h2>translate3d(x, y, z)</h2>
98+
<div class="container">
99+
<div id="box-5" class="box"></div>
100+
<div class="box box-origin"></div>
101+
<p>(10px, 10px, 200px)</p>
102+
</div>
103+
<div class="container">
104+
<div id="box-6" class="box"></div>
105+
<div class="box box-origin"></div>
106+
<p>(0, 0, -100px)</p>
107+
</div>
108+
<div class="container">
109+
<div id="box-7" class="box"></div>
110+
<div class="box box-origin"></div>
111+
<p>(0, 0, 0)</p>
112+
</div>
113+
<style type="text/css">
114+
#box-5 {
115+
transform: translateZ(100px) translateY(10px) translateX(10px);
116+
}
117+
118+
#box-6 {
119+
transform: translate3d(0, 0, -100px);
120+
}
121+
122+
#box-7 {
123+
transform: translate3d(0, 0, 0);
124+
}
125+
</style>
126+
<h2>scale3d</h2>
127+
<h3>改变轴的比例</h3>
128+
<div class="container">
129+
<div id="box-8" class="box"></div>
130+
<div class="box box-origin"></div>
131+
<p>scale3d(1.2, 1.2, 1)</p>
132+
</div>
133+
<style>
134+
#box-8 {
135+
transform: scale3d(1.2, 1.2, 1);
136+
}
137+
</style>
138+
<h2>rotate3d</h2>
139+
<div class="container">
140+
<div id="box-9" class="box"></div>
141+
<div class="box box-origin"></div>
142+
<p>(0, 0, 1, 45deg)</p>
143+
</div>
144+
<div class="container">
145+
<div id="box-10" class="box"></div>
146+
<div class="box box-origin"></div>
147+
<p>(1, 1, 1, 45deg)</p>
148+
</div>
149+
<div class="container">
150+
<div id="box-11" class="box"></div>
151+
<div class="box box-origin"></div>
152+
<p>(-1, -1, -1, 45deg)</p>
153+
</div>
154+
<style type="text/css">
155+
#box-9 {
156+
transform: rotate3d(0, 0, 1, 45deg);
157+
}
158+
159+
#box-10 {
160+
transform: rotate3d(1, 1, 1, 45deg);
161+
}
162+
163+
#box-11 {
164+
transform: rotate3d(-1, -1, -1, 45deg);
165+
}
166+
</style>
167+
<h2>transform-style</h2>
168+
<div class="container">
169+
<div id="box-12" class="box">
170+
<div id="box-13" class="box"></div>
171+
</div>
172+
<div class="box box-origin"></div>
173+
<p>preserve-3d</p>
174+
</div>
175+
<style type="text/css">
176+
#box-12 {
177+
transform: rotateX(45deg);
178+
transform-style: preserve-3d;
179+
}
180+
#box-13 {
181+
transform: rotateY(45deg);
182+
}
183+
</style>
184+
<div class="container">
185+
<div id="box-14" class="box">
186+
<div id="box-15" class="box"></div>
187+
</div>
188+
<div class="box box-origin"></div>
189+
<p>flat</p>
190+
</div>
191+
<style type="text/css">
192+
#box-14 {
193+
transform: rotateX(45deg);
194+
transform-style: flat;
195+
}
196+
#box-15 {
197+
transform: rotateY(45deg);
198+
}
199+
</style>
200+
<h2>backface-visibility</h2>
201+
<div class="container">
202+
<div id="box-16" class="box">
203+
<p>B</p>
204+
</div>
205+
<div class="box box-origin"></div>
206+
<p>visible</p>
207+
</div>
208+
<div class="container">
209+
<div id="box-17" class="box">
210+
<p>B</p>
211+
</div>
212+
<div class="box box-origin"></div>
213+
<p>hidden</p>
214+
</div>
215+
<style type="text/css">
216+
#box-16 {
217+
background-color: rgba(138, 161, 64, 1);
218+
transform: rotateY(100deg);
219+
backface-visibility: visible;
220+
}
221+
#box-16 p {
222+
color: black;
223+
font-size: 3rem;
224+
}
225+
#box-17 {
226+
background-color: rgba(138, 161, 64, 1);
227+
transform: rotateY(100deg);
228+
backface-visibility: hidden;
229+
}
230+
#box-17 p {
231+
color: black;
232+
font-size: 3rem;
233+
}
234+
</style>
235+
</body>
236+
237+
</html>

0 commit comments

Comments
 (0)