[PC与移动端皆可]会动的盒子机器人
浏览器必须可以解析perspective属性。
在线：http://wangxinsheng.herokuapp.com/boxMan
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>[WXS]盒子机器人</title>
6 <meta name="author" content="WangXinsheng">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
10 <meta http-equiv="X-UA-Compatible" content="chrome=1">
11 </head>
12 <style>
13 * {
14 -webkit-box-sizing: border-box;
15 -moz-box-sizing: border-box;
16 box-sizing: border-box;
17 }
18
19 body {
20 height: 10em;
21 left: 50%;
22 margin-left: -5em;
23 margin-top: -5em;
24 /*perspective:设置元素被查看位置的视图*/
25 -webkit-perspective: 1000px;
26 -ms-perspective: 1000px;
27 perspective: 1000px;
28 /*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/
29 position: absolute;
30 top: 50%;
31 width: 10em;
32 }
33 cube{
34 position: absolute;
35 -webkit-transform-style: preserve-3d;
36 -ms-transform-style: preserve-3d;
37 transform-style: preserve-3d;
38 -webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
39 transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
40 }
41
42 cube * {
43 background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1));
44 border: 2px solid rgba(183,154,112,1);
45 position: absolute;
46 display: block;
47 }
48
49 cube.header {
50 height: 8em;
51 width: 13em;
52 background:none;
53 border:none;
54 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
55 transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
56 }
57 cube.header back {
58 height: 8em;
59 width: 13em;
60 -webkit-transform: rotateX(180deg) translateZ(4em);
61 -ms-transform: rotateX(180deg) translateZ(4em);
62 transform: rotateX(180deg) translateZ(4em);
63 }
64
65 cube.header bottom {
66 height: 8em;
67 width: 13em;
68 -webkit-transform: rotateX(-90deg) translateZ(4em);
69 -ms-transform: rotateX(-90deg) translateZ(4em);
70 transform: rotateX(-90deg) translateZ(4em);
71 display:none;
72 }
73
74 cube.header front {
75 height: 8em;
76 width: 13em;
77 -webkit-transform: rotateY(0deg) translateZ(4em);
78 -ms-transform: rotateY(0deg) translateZ(4em);
79 transform: rotateY(0deg) translateZ(4em);
80 background:url(‘img/headerFront.png‘) no-repeat rgb(202,184,160);
81 -moz-background-size:cover;
82 -webkit-background-size:cover;
83 -o-background-size:cover;
84 background-size:cover;
85 }
86
87 cube.header left {
88 height: 8em;
89 width: 8em;
90 -webkit-transform: rotateY(-90deg) translateZ(4em);
91 -ms-transform: rotateY(-90deg) translateZ(4em);
92 transform: rotateY(-90deg) translateZ(4em);
93 }
94
95 cube.header right {
96 height: 8em;
97 width: 8em;
98 -webkit-transform: rotateY(90deg) translateZ(9em);
99 -ms-transform: rotateY(90deg) translateZ(9em);
100 transform: rotateY(90deg) translateZ(9em);
101 }
102
103 cube.header top {
104 height: 8em;
105 width: 13em;
106 -webkit-transform: rotateX(90deg) translateZ(4em);
107 -ms-transform:rotateX(90deg) translateZ(4em);
108 transform: rotateX(90deg) translateZ(4em);
109 }
110 /*------------------------------*/
111 cube.body.body {
112 height: 10em;
113 width: 6em;
114 background:none;
115 border:none;
116 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
117 transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
118 }
119 cube.body.body back {
120 height: 10em;
121 width: 6em;
122 -webkit-transform: rotateX(180deg) translateZ(3em);
123 -ms-transform: rotateX(180deg) translateZ(3em);
124 transform: rotateX(180deg) translateZ(3em);
125 }
126
127 cube.body.body bottom {
128 height: 6em;
129 width: 6em;
130 -webkit-transform: rotateX(-90deg) translateZ(7em);
131 -ms-transform: rotateX(-90deg) translateZ(7em);
132 transform: rotateX(-90deg) translateZ(7em);
133 }
134
135 cube.body.body front {
136 height: 10em;
137 width: 6em;
138 -webkit-transform: rotateY(0deg) translateZ(3em);
139 -ms-transform: rotateY(0deg) translateZ(3em);
140 transform: rotateY(0deg) translateZ(3em);
141 background-color:rgb(202,184,160,1);
142 background:url(‘img/bodyFront.png‘) no-repeat rgb(202,184,160);;
143 -moz-background-size:cover;
144 -webkit-background-size:cover;
145 -o-background-size:cover;
146 background-size:cover;
147 }
148
149 cube.body.body left {
150 height: 10em;
151 width: 6em;
152 -webkit-transform: rotateY(-90deg) translateZ(3em);
153 -ms-transform: rotateY(-90deg) translateZ(3em);
154 transform: rotateY(-90deg) translateZ(3em);
155 }
156
157 cube.body.body right {
158 height: 10em;
159 width: 6em;
160 -webkit-transform: rotateY(90deg) translateZ(3em);
161 -ms-transform: rotateY(90deg) translateZ(3em);
162 transform: rotateY(90deg) translateZ(3em);
163 }
164
165 cube.body.body top {
166 height: 6em;
167 width: 6em;
168 -webkit-transform: rotateX(90deg) translateZ(3em);
169 -ms-transform: rotateX(90deg) translateZ(3em);
170 transform: rotateX(90deg) translateZ(3em);
171 }
172 /*------------------------------*/
173 cube.hand {
174 height: 8em;
175 width: 3em;
176 background:none;
177 border:none;
178 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
179 transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
180 }
181 cube.hand back {
182 height: 8em;
183 width: 3em;
184 -webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
185 -ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
186 transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
187 }
188
189 cube.hand bottom {
190 height: 3em;
191 width: 3em;
192 -webkit-transform: rotateX(-90deg) translateZ(9.5em);
193 -ms-transform: rotateX(-90deg) translateZ(9.5em);
194 transform: rotateX(-90deg) translateZ(9.5em);
195 }
196
197 cube.hand front {
198 height: 8em;
199 width: 3em;
200 -webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
201 -ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
202 transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
203 }
204
205 cube.hand left {
206 height: 8em;
207 width: 3em;
208 -webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
209 -ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
210 transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
211 }
212
213 cube.hand right {
214 height: 8em;
215 width: 3em;
216 -webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
217 -ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
218 transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
219 }
220
221 cube.hand top {
222 height: 3em;
223 width: 3em;
224 -webkit-transform: rotateX(90deg) translateZ(-1.5em);
225 -ms-transform: rotateX(90deg) translateZ(-1.5em);
226 transform: rotateX(90deg) translateZ(-1.5em);
227 }
228 /*------------------------------*/
229 cube.foot {
230 height: 8em;
231 width: 2.5em;
232 background:none;
233 border:none;
234 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
235 transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
236 }
237 cube.foot back {
238 height: 8em;
239 width: 2.5em;
240 -webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
241 -ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
242 transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
243 }
244
245 cube.foot bottom {
246 height: 5.5em;
247 width: 2.5em;
248 -webkit-transform: rotateX(-90deg) translateZ(8.2em);
249 -ms-transform: rotateX(-90deg) translateZ(8.2em);
250 transform: rotateX(-90deg) translateZ(8.2em);
251 }
252
253 cube.foot front {
254 height: 8em;
255 width: 2.5em;
256 -webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
257 -ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
258 transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
259 }
260
261 cube.foot left {
262 height: 8em;
263 width: 5.5em;
264 -webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
265 -ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
266 transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
267 }
268
269 cube.foot right {
270 height: 8em;
271 width: 5.5em;
272 -webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
273 -ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
274 transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
275 }
276
277 cube.foot top {
278 height: 5.5em;
279 width: 2.5em;
280 -webkit-transform: rotateX(90deg) translateZ(-0.25em);
281 -ms-transform: rotateX(90deg) translateZ(-0.25em);
282 transform: rotateX(90deg) translateZ(-0.25em);
283 }
284 /*------------------------------*/
285 cube.dress {
286 height: 3em;
287 width: 6em;
288 background:none;
289 border:none;
290 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
291 transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
292 }
293 cube.dress back {
294 height: 3em;
295 width: 6em;
296 -webkit-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
297 -ms-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
298 transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);
299 }
300
301 cube.dress front {
302 height: 3em;
303 width: 6em;
304 -webkit-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
305 -ms-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
306 transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
307 }
308
309 cube.dress left {
310 height: 3em;
311 width: 6em;
312 -webkit-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
313 -ms-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
314 transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
315 }
316
317 cube.dress right {
318 height: 3em;
319 width: 6em;
320 -webkit-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
321 -ms-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
322 transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);
323 }
324 /*------------animate-------------*/
325 /*--------------------*/
326 .lHand{
327 animation: lhand 2s infinite linear;
328 -moz-animation: lhand 2s infinite linear; /* Firefox */
329 -webkit-animation: lhand 2s infinite linear; /* Safari 和 Chrome */
330 -webkit-animation-direction:alternate;
331 }
332 @keyframes lhand
333 {
334 from {
335 transform: rotateX(-50deg) rotateZ(-5deg);
336 }
337 to {
338 transform: rotateX(50deg) rotateZ(5deg);
339 }
340 }
341 @-moz-keyframes lhand /* Firefox */
342 {
343 from {
344 -moz-transform: rotateX(-50deg) rotateZ(-5deg);
345 }
346 to {
347 -moz-transform: rotateX(50deg) rotateZ(5deg);
348 }
349 }
350 @-webkit-keyframes lhand /* Safari 和 Chrome */
351 {
352 from {
353 -webkit-transform: rotateX(-50deg) rotateZ(-5deg);
354 }
355 to {
356 -webkit-transform: rotateX(50deg) rotateZ(5deg);
357 }
358 }
359 /*--------------------*/
360 .rHand{
361 animation: rhand 2s infinite linear;
362 -moz-animation: rhand 2s infinite linear; /* Firefox */
363 -webkit-animation: rhand 2s infinite linear; /* Safari 和 Chrome */
364 -webkit-animation-direction:alternate;
365 }
366 @keyframes rhand
367 {
368 from {
369 transform: rotateX(50deg) rotateZ(5deg);
370 }
371 to {
372 transform: rotateX(-50deg) rotateZ(-5deg);
373 }
374 }
375 @-moz-keyframes rhand /* Firefox */
376 {
377 from {
378 -moz-transform: rotateX(50deg) rotateZ(5deg);
379 }
380 to {
381 -moz-transform: rotateX(-50deg) rotateZ(-5deg);
382 }
383 }
384 @-webkit-keyframes rhand /* Safari 和 Chrome */
385 {
386 from {
387 -webkit-transform: rotateX(50deg) rotateZ(5deg);
388 }
389 to {
390 -webkit-transform: rotateX(-50deg) rotateZ(-5deg);
391 }
392 }
393 /*--------------------*/
394 .LFoot{
395 animation: lfoot 2s infinite linear;
396 -moz-animation: lfoot 2s infinite linear; /* Firefox */
397 -webkit-animation: lfoot 2s infinite linear; /* Safari 和 Chrome */
398 -webkit-animation-direction:alternate;
399 }
400 @keyframes lfoot
401 {
402 from {
403 transform: rotateX(30deg) rotateZ(5deg);
404 }
405 to {
406 transform: rotateX(-30deg) rotateZ(-5deg);
407 }
408 }
409 @-moz-keyframes lfoot /* Firefox */
410 {
411 from {
412 -moz-transform: rotateX(30deg) rotateZ(5deg);
413 }
414 to {
415 -moz-transform: rotateX(-30deg) rotateZ(-5deg);
416 }
417 }
418 @-webkit-keyframes lfoot /* Safari 和 Chrome */
419 {
420 from {
421 -webkit-transform: rotateX(30deg) rotateZ(5deg);
422 }
423 to {
424 -webkit-transform: rotateX(-30deg) rotateZ(-5deg);
425 }
426 }
427 /*--------------------*/
428 .rFoot{
429 animation: rfoot 2s infinite linear;
430 -moz-animation: rfoot 2s infinite linear; /* Firefox */
431 -webkit-animation: rfoot 2s infinite linear; /* Safari 和 Chrome */
432 -webkit-animation-direction:alternate;
433 }
434 @keyframes rfoot
435 {
436 from {
437 transform: rotateX(-30deg) rotateZ(-5deg);
438 }
439 to {
440 transform: rotateX(30deg) rotateZ(5deg);
441 }
442 }
443 @-moz-keyframes rfoot /* Firefox */
444 {
445 from {
446 -moz-transform: rotateX(-30deg) rotateZ(-5deg);
447 }
448 to {
449 -moz-transform: rotateX(30deg) rotateZ(5deg);
450 }
451 }
452 @-webkit-keyframes rfoot /* Safari 和 Chrome */
453 {
454 from {
455 -webkit-transform: rotateX(-30deg) rotateZ(-5deg);
456 }
457 to {
458 -webkit-transform: rotateX(30deg) rotateZ(5deg);
459 }
460 }
461 /*--------------------*/
462 .header{
463 animation: header 3s infinite ease-out;
464 -moz-animation: header 3s infinite ease-out; /* Firefox */
465 -webkit-animation: header 3s infinite ease-out; /* Safari 和 Chrome */
466 -webkit-animation-direction:alternate;
467 }
468 @keyframes header
469 {
470 from {
471 transform: rotateX(-8deg) rotateY(-10deg);
472 }
473 to {
474 transform: rotateX(8deg) rotateY(10deg);
475 }
476 }
477 @-moz-keyframes header /* Firefox */
478 {
479 from {
480 -moz-transform: rotateX(-8deg) rotateY(-10deg);
481 }
482 to {
483 -moz-transform: rotateX(8deg) rotateY(10deg);
484 }
485 }
486 @-webkit-keyframes header /* Safari 和 Chrome */
487 {
488 from {
489 -webkit-transform: rotateX(-8deg) rotateY(-10deg);
490 }
491 to {
492 -webkit-transform: rotateX(8deg) rotateY(10deg);
493 }
494 }
495 /*--------------------*/
496 .all{
497 animation: all 8s infinite linear;
498 -moz-animation: all 8s infinite linear;
499 -webkit-animation: all 8s infinite linear;
500 -webkit-animation-direction:alternate;
501 }
502 @keyframes all
503 {
504 from {
505 transform: rotateY(20deg);
506 }
507 to {
508 transform: rotateY(50deg);
509 }
510 }
511 @-moz-keyframes all /* Firefox */
512 {
513 from {
514 -moz-transform: rotateY(20deg);
515 }
516 to {
517 -moz-transform: rotateY(50deg);
518 }
519 }
520 @-webkit-keyframes all /* Safari 和 Chrome */
521 {
522 from {
523 -webkit-transform: rotateY(20deg);
524 }
525 to {
526 -webkit-transform: rotateY(50deg);
527 }
528 }
529 </style>
530 <body>
531 <cube class="all" style=‘‘>
532 <cube class="header" style=‘top:-6em;left:-3.5em‘>
533 <back></back>
534 <bottom></bottom>
535 <front></front>
536 <left></left>
537 <right></right>
538 <top></top>
539 </cube>
540 <cube class="body" style=‘‘>
541 <back></back>
542 <bottom></bottom>
543 <front></front>
544 <left></left>
545 <right></right>
546 <top></top>
547 </cube>
548 <cube class="hand lHand" style=‘top:0.5em;left:-3.5em;‘>
549 <back></back>
550 <bottom></bottom>
551 <front></front>
552 <left></left>
553 <right></right>
554 <top></top>
555 </cube>
556 <cube class="hand rHand" style=‘top:0.5em;left:6.5em;‘>
557 <back></back>
558 <bottom></bottom>
559 <front></front>
560 <left></left>
561 <right></right>
562 <top></top>
563 </cube>
564 <cube class="foot LFoot" style=‘top:6.5em;left:0.25em;‘>
565 <back></back>
566 <bottom></bottom>
567 <front></front>
568 <left></left>
569 <right></right>
570 <top></top>
571 </cube>
572 <cube class="foot rFoot" style=‘top:6.5em;left:3.25em;‘>
573 <back></back>
574 <bottom></bottom>
575 <front></front>
576 <left></left>
577 <right></right>
578 <top></top>
579 </cube>
580 <cube class="dress" style=‘top:6em;left:0em;‘>
581 <back></back>
582 <front></front>
583 <left></left>
584 <right></right>
585 </cube>
586 </cube>
587 <script>
588 </script>
589 </body>
590 </html>
rar：http://download.csdn.net/detail/wangxsh42/8565415
时间： 2024-10-28 19:08:50