行星运行轨道效果

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7     <title>CSS3实现星系轨道旋转特效</title>
 8     <link rel="stylesheet" type="text/css" href="base.css">
 9 </head>
10 
11 <body>
12     <div class="xx">
13         <div class="center">
14             <div class="ui_base1 u_p3d">
15                 <div class="base u_p3d">
16                     <div class="pan"></div>
17                     <div class="ball_base u_p3d ball_1">
18                         <div class="ball">火星</div>
19                     </div>
20                     <div class="ball_base u_p3d ball_2">
21                         <div class="ball">水星</div>
22                     </div>
23                     <div class="ball_base u_p3d ball_3">
24                         <div class="ball">金星</div>
25                     </div>
26                     <div class="ball_base u_p3d ball_4">
27                         <div class="ball">木星</div>
28                     </div>
29                     <div class="ball_base u_p3d ball_5">
30                         <div class="ball">土星</div>
31                     </div>
32                     <div class="ball_base u_p3d ball_6">
33                         <div class="ball">天王星</div>
34                     </div>
35                     <div class="ball_base u_p3d ball_7">
36                         <div class="ball">海王星</div>
37                     </div>
38                     <div class="ball_base u_p3d ball_8">
39                         <div class="ball">大王星</div>
40                     </div>
41                 </div>
42             </div>
43             <!-- <div class="ui_base2 u_p3d">
44                         <div class="base u_p3d">
45                             <div class="pan"></div>
46                             <div class="ball_base u_p3d ball_1">
47                                 <div class="ball">火星</div>
48                             </div>
49                             <div class="ball_base u_p3d ball_2">
50                                 <div class="ball">水星</div>
51                             </div>
52                             <div class="ball_base u_p3d ball_3">
53                                 <div class="ball">金星</div>
54                             </div>
55                             <div class="ball_base u_p3d ball_4">
56                                 <div class="ball">木星</div>
57                             </div>
58                             <div class="ball_base u_p3d ball_5">
59                                 <div class="ball">土星</div>
60                             </div>
61                             <div class="ball_base u_p3d ball_6">
62                                 <div class="ball">天王星</div>
63                             </div>
64                             <div class="ball_base u_p3d ball_7">
65                                 <div class="ball">海王星</div>
66                             </div>
67                             <div class="ball_base u_p3d ball_8">
68                                 <div class="ball">大王星</div>
69                             </div>
70                         </div>
71                     </div> -->
72 
73         </div>
74     </div>
75 
76 </body>
77 
78 </html>

  1 * {
  2     margin: 0;
  3     padding: 0;
  4     list-style: ntwo;
  5 }
  6 
  7 body {
  8     width: 100%;
  9     height: 100%;
 10     min-width: 1890px;
 11     min-height: 950px;
 12     background: #d45a00;
 13     font-family: microsoft yahei;
 14 }
 15 
 16 .center {
 17     width: 41%;
 18     margin: auto;
 19     min-width: 735px;
 20     min-height: 650px;
 21     background-color: #0f1f49;
 22     overflow: hidden;
 23     position: relative;
 24 }
 25 
 26 @-webkit-keyframes one1 {
 27     0% {
 28         -webkit-transform: rotateY(0deg) rotateZ(10deg);
 29     }
 30     100% {
 31         -webkit-transform: rotateY(-360deg) rotateZ(10deg);
 32     }
 33 }
 34 
 35 @keyframes one1 {
 36     0% {
 37         transform: rotateY(0deg) rotateZ(10deg);
 38     }
 39     100% {
 40         transform: rotateY(-360deg) rotateZ(10deg);
 41     }
 42 }
 43 
 44 @-webkit-keyframes one2 {
 45     0% {
 46         -webkit-transform: rotateY(-45deg) rotateZ(10deg);
 47     }
 48     100% {
 49         -webkit-transform: rotateY(-405deg) rotateZ(10deg);
 50     }
 51 }
 52 
 53 @keyframes one2 {
 54     0% {
 55         transform: rotateY(-45deg) rotateZ(10deg);
 56     }
 57     100% {
 58         transform: rotateY(-405deg) rotateZ(10deg);
 59     }
 60 }
 61 
 62 @-webkit-keyframes one3 {
 63     0% {
 64         -webkit-transform: rotateY(-90deg) rotateZ(10deg);
 65     }
 66     100% {
 67         -webkit-transform: rotateY(-450deg) rotateZ(10deg);
 68     }
 69 }
 70 
 71 @keyframes one3 {
 72     0% {
 73         transform: rotateY(-90deg) rotateZ(10deg);
 74     }
 75     100% {
 76         transform: rotateY(-450deg) rotateZ(10deg);
 77     }
 78 }
 79 
 80 @-webkit-keyframes one4 {
 81     0% {
 82         -webkit-transform: rotateY(-135deg) rotateZ(10deg);
 83     }
 84     100% {
 85         -webkit-transform: rotateY(-495deg) rotateZ(10deg);
 86     }
 87 }
 88 
 89 @keyframes one4 {
 90     0% {
 91         transform: rotateY(-135deg) rotateZ(10deg);
 92     }
 93     100% {
 94         transform: rotateY(-495deg) rotateZ(10deg);
 95     }
 96 }
 97 
 98 @-webkit-keyframes one5 {
 99     0% {
100         -webkit-transform: rotateY(-180deg) rotateZ(10deg);
101     }
102     100% {
103         -webkit-transform: rotateY(-540deg) rotateZ(10deg);
104     }
105 }
106 
107 @keyframes one5 {
108     0% {
109         transform: rotateY(-180deg) rotateZ(10deg);
110     }
111     100% {
112         transform: rotateY(-540deg) rotateZ(10deg);
113     }
114 }
115 
116 @-webkit-keyframes one6 {
117     0% {
118         -webkit-transform: rotateY(-225deg) rotateZ(10deg);
119     }
120     100% {
121         -webkit-transform: rotateY(-585deg) rotateZ(10deg);
122     }
123 }
124 
125 @keyframes one6 {
126     0% {
127         transform: rotateY(-225deg) rotateZ(10deg);
128     }
129     100% {
130         transform: rotateY(-585deg) rotateZ(10deg);
131     }
132 }
133 
134 @-webkit-keyframes one7 {
135     0% {
136         -webkit-transform: rotateY(-270deg) rotateZ(10deg);
137     }
138     100% {
139         -webkit-transform: rotateY(-630deg) rotateZ(10deg);
140     }
141 }
142 
143 @keyframes one7 {
144     0% {
145         transform: rotateY(-270deg) rotateZ(10deg);
146     }
147     100% {
148         transform: rotateY(-630deg) rotateZ(10deg);
149     }
150 }
151 
152 @-webkit-keyframes one8 {
153     0% {
154         -webkit-transform: rotateY(-315deg) rotateZ(10deg);
155     }
156     100% {
157         -webkit-transform: rotateY(-675deg) rotateZ(10deg);
158     }
159 }
160 
161 @keyframes one8 {
162     0% {
163         transform: rotateY(-315deg) rotateZ(10deg);
164     }
165     100% {
166         transform: rotateY(-675deg) rotateZ(10deg);
167     }
168 }
169 
170 @keyframes one {
171     0% {
172         transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
173     }
174     100% {
175         transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
176     }
177 }
178 
179 @keyframes one_p {
180     0% {
181         transform: rotateZ(0deg);
182     }
183     100% {
184         transform: rotateZ(-360deg);
185     }
186 }
187 
188 @-webkit-keyframes one {
189     0% {
190         -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
191     }
192     100% {
193         -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
194     }
195 }
196 
197 @-webkit-keyframes one_p {
198     0% {
199         -webkit-transform: rotateZ(0deg);
200     }
201     100% {
202         -webkit-transform: rotateZ(-360deg);
203     }
204 }
205 
206 .u_p3d {
207     -webkit-transform-style: preserve-3d !important;
208     transform-style: preserve-3d !important;
209 }
210 
211 .ui_base1 {
212     position: absolute;
213     width: 400px;
214     height: 0px;
215     margin: 19% 22%;
216     -webkit-perspective: 1000px;
217     -webkit-perspective-origin: 50% 0%;
218     perspective: 1000px;
219     perspective-origin: 50% 0%;
220 }
221 
222 .ui_base1 .base {
223     -webkit-transform: rotateX(80deg) rotateY(-10deg);
224     transform: rotateX(80deg) rotateY(-10deg);
225     position: absolute;
226     width: 350px;
227     height: 350px;
228     -webkit-backface-visibility: hidden;
229     backface-visibility: hidden;
230     animation: one 10s linear 0s infinite;
231 }
232 
233 .ui_base1 .ball_base {
234     -webkit-transform-origin: 225px 0px;
235     transform-origin: 225px 0px;
236     position: absolute;
237     top: 175px;
238     left: -50px;
239     width: 225px;
240     height: 127px;
241 }
242 
243 .ui_base1 .ball {
244     -webkit-transition: all 2s ease-out 0ms;
245     transition: all 2s ease-out 0ms;
246     -webkit-transform-origin: 50% 50%;
247     transform-origin: 50% 50%;
248     position: absolute;
249     width: 50px;
250     height: 50px;
251     line-height: 50px;
252     text-align: center;
253     background-image: url(img/hovertreeball.png);
254     background-size: 100% 100%;
255     left: 0px;
256     top: 0px;
257     color: rgba(255, 255, 255, 0);
258     font-size: 12px;
259     opacity: 1;
260     overflow: hidden;
261 }
262 
263 .ui_base1 .pan {
264     position: absolute;
265     width: 100%;
266     height: 100%;
267     background-image: url("img/c.png");
268     background-size: 100% 100%;
269     -webkit-animation: one_p 5s linear 0s infinite;
270     animation: one_p 5s linear 0s infinite;
271 }
272 
273 .ui_base1 .ball {
274     color: #fff;
275     opacity: 1;
276 }
277 
278 .ui_base1 .ball_1 .ball {
279     transform: rotateY(10deg) rotateZ(10deg);
280     animation: one1 10s linear 0s infinite;
281     -webkit-transition-delay: 1500ms !important;
282     transition-delay: 1500ms !important;
283 }
284 
285 .ui_base1 .ball_2 .ball {
286     -webkit-animation: one2 10s linear 0s infinite;
287     animation: one2 10s linear 0s infinite;
288     -webkit-transition-delay: 1300ms !important;
289     transition-delay: 1300ms !important;
290 }
291 
292 .ui_base1 .ball_3 .ball {
293     -webkit-animation: one3 10s linear 0s infinite;
294     animation: one3 10s linear 0s infinite;
295     -webkit-transition-delay: 1100ms !important;
296     transition-delay: 1100ms !important;
297 }
298 
299 .ui_base1 .ball_4 .ball {
300     -webkit-animation: one4 10s linear 0s infinite;
301     animation: one4 10s linear 0s infinite;
302     -webkit-transition-delay: 900ms !important;
303     transition-delay: 900ms !important;
304 }
305 
306 .ui_base1 .ball_5 .ball {
307     -webkit-animation: one5 10s linear 0s infinite;
308     animation: one5 10s linear 0s infinite;
309     -webkit-transition-delay: 700ms !important;
310     transition-delay: 700ms !important;
311 }
312 
313 .ui_base1 .ball_6 .ball {
314     -webkit-animation: one6 10s linear 0s infinite;
315     animation: one6 10s linear 0s infinite;
316     -webkit-transition-delay: 500ms !important;
317     transition-delay: 500ms !important;
318 }
319 
320 .ui_base1 .ball_7 .ball {
321     -webkit-animation: one6 10s linear 0s infinite;
322     animation: one7 10s linear 0s infinite;
323     -webkit-transition-delay: 300ms !important;
324     transition-delay: 300ms !important;
325 }
326 
327 .ui_base1 .ball_8 .ball {
328     -webkit-animation: one6 10s linear 0s infinite;
329     animation: one8 10s linear 0s infinite;
330     -webkit-transition-delay: 100ms !important;
331     transition-delay: 100ms !important;
332 }
333 
334 .ui_base1 .ball_1 {
335     -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
336     transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
337 }
338 
339 .ui_base1 .ball_2 {
340     -webkit-transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
341     transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
342 }
343 
344 .ui_base1 .ball_3 {
345     -webkit-transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
346     transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
347 }
348 
349 .ui_base1 .ball_4 {
350     -webkit-transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
351     transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
352 }
353 
354 .ui_base1 .ball_5 {
355     -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
356     transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
357 }
358 
359 .ui_base1 .ball_6 {
360     -webkit-transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
361     transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
362 }
363 
364 .ui_base1 .ball_7 {
365     -webkit-transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
366     transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
367 }
368 
369 .ui_base1 .ball_8 {
370     -webkit-transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
371     transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
372 }
373 
374 
375 /******************************************************2*********************************/
376 
377 * {
378     margin: 0;
379     padding: 0;
380     list-style: none;
381 }
382 
383 body {
384     background: #d45a00;
385     font-family: microsoft yahei;
386 }
387 
388 @-webkit-keyframes two1 {
389     0% {
390         -webkit-transform: rotateY(0deg) rotateZ(10deg);
391     }
392     100% {
393         -webkit-transform: rotateY(-360deg) rotateZ(10deg);
394     }
395 }
396 
397 @keyframes two1 {
398     0% {
399         transform: rotateY(0deg) rotateZ(10deg);
400     }
401     100% {
402         transform: rotateY(-360deg) rotateZ(10deg);
403     }
404 }
405 
406 @-webkit-keyframes two2 {
407     0% {
408         -webkit-transform: rotateY(-45deg) rotateZ(10deg);
409     }
410     100% {
411         -webkit-transform: rotateY(-405deg) rotateZ(10deg);
412     }
413 }
414 
415 @keyframes two2 {
416     0% {
417         transform: rotateY(-45deg) rotateZ(10deg);
418     }
419     100% {
420         transform: rotateY(-405deg) rotateZ(10deg);
421     }
422 }
423 
424 @-webkit-keyframes two3 {
425     0% {
426         -webkit-transform: rotateY(-90deg) rotateZ(10deg);
427     }
428     100% {
429         -webkit-transform: rotateY(-450deg) rotateZ(10deg);
430     }
431 }
432 
433 @keyframes two3 {
434     0% {
435         transform: rotateY(-90deg) rotateZ(10deg);
436     }
437     100% {
438         transform: rotateY(-450deg) rotateZ(10deg);
439     }
440 }
441 
442 @-webkit-keyframes two4 {
443     0% {
444         -webkit-transform: rotateY(-135deg) rotateZ(10deg);
445     }
446     100% {
447         -webkit-transform: rotateY(-495deg) rotateZ(10deg);
448     }
449 }
450 
451 @keyframes two4 {
452     0% {
453         transform: rotateY(-135deg) rotateZ(10deg);
454     }
455     100% {
456         transform: rotateY(-495deg) rotateZ(10deg);
457     }
458 }
459 
460 @-webkit-keyframes two5 {
461     0% {
462         -webkit-transform: rotateY(-180deg) rotateZ(10deg);
463     }
464     100% {
465         -webkit-transform: rotateY(-540deg) rotateZ(10deg);
466     }
467 }
468 
469 @keyframes two5 {
470     0% {
471         transform: rotateY(-180deg) rotateZ(10deg);
472     }
473     100% {
474         transform: rotateY(-540deg) rotateZ(10deg);
475     }
476 }
477 
478 @-webkit-keyframes two6 {
479     0% {
480         -webkit-transform: rotateY(-225deg) rotateZ(10deg);
481     }
482     100% {
483         -webkit-transform: rotateY(-585deg) rotateZ(10deg);
484     }
485 }
486 
487 @keyframes two6 {
488     0% {
489         transform: rotateY(-225deg) rotateZ(10deg);
490     }
491     100% {
492         transform: rotateY(-585deg) rotateZ(10deg);
493     }
494 }
495 
496 @-webkit-keyframes two7 {
497     0% {
498         -webkit-transform: rotateY(-270deg) rotateZ(10deg);
499     }
500     100% {
501         -webkit-transform: rotateY(-630deg) rotateZ(10deg);
502     }
503 }
504 
505 @keyframes two7 {
506     0% {
507         transform: rotateY(-270deg) rotateZ(10deg);
508     }
509     100% {
510         transform: rotateY(-630deg) rotateZ(10deg);
511     }
512 }
513 
514 @-webkit-keyframes two8 {
515     0% {
516         -webkit-transform: rotateY(-315deg) rotateZ(10deg);
517     }
518     100% {
519         -webkit-transform: rotateY(-675deg) rotateZ(10deg);
520     }
521 }
522 
523 @keyframes two8 {
524     0% {
525         transform: rotateY(-315deg) rotateZ(10deg);
526     }
527     100% {
528         transform: rotateY(-675deg) rotateZ(10deg);
529     }
530 }
531 
532 @keyframes two {
533     0% {
534         transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
535     }
536     100% {
537         transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
538     }
539 }
540 
541 @keyframes two_p {
542     0% {
543         transform: rotateZ(0deg);
544     }
545     100% {
546         transform: rotateZ(-360deg);
547     }
548 }
549 
550 @-webkit-keyframes two {
551     0% {
552         -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
553     }
554     100% {
555         -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
556     }
557 }
558 
559 @-webkit-keyframes two_p {
560     0% {
561         -webkit-transform: rotateZ(0deg);
562     }
563     100% {
564         -webkit-transform: rotateZ(-360deg);
565     }
566 }
567 
568 .u_p3d {
569     -webkit-transform-style: preserve-3d !important;
570     transform-style: preserve-3d !important;
571 }
572 
573 .ui_base2 {
574     position: absolute;
575     width: 500px;
576     height: 0px;
577     margin: 12% 16%;
578     -webkit-perspective: 1000px;
579     -webkit-perspective-origin: 140% 0%;
580     perspective: 1000px;
581     perspective-origin: 140% 0%;
582 }
583 
584 .ui_base2 .base {
585     -webkit-transform: rotateX(80deg) rotateY(-10deg);
586     transform: rotateX(80deg) rotateY(-10deg);
587     position: absolute;
588     width: 500px;
589     height: 500px;
590     -webkit-backface-visibility: hidden;
591     backface-visibility: hidden;
592     animation: two 10s linear 0s infinite;
593 }
594 
595 .ui_base2 .ball_base {
596     -webkit-transform-origin: 107% 0px;
597     transform-origin: 107% 0px;
598     position: absolute;
599     top: 175px;
600     left: -50px;
601     width: 50%;
602     height: 127px;
603 }
604 
605 .ui_base2 .ball {
606     -webkit-transition: all 2s ease-out 0ms;
607     transition: all 2s ease-out 0ms;
608     -webkit-transform-origin: 50% 50%;
609     transform-origin: 50% 50%;
610     position: absolute;
611     width: 50px;
612     height: 50px;
613     line-height: 50px;
614     text-align: center;
615     background-image: url(img/hovertreeball.png);
616     background-size: 100% 100%;
617     left: 0px;
618     top: 0px;
619     color: rgba(255, 255, 255, 0);
620     font-size: 12px;
621     opacity: 1;
622     overflow: hidden;
623 }
624 
625 .ui_base2 .pan {
626     position: absolute;
627     width: 100%;
628     height: 100%;
629     background-image: url("img/c.png");
630     background-size: 100% 100%;
631     -webkit-animation: two_p 5s linear 0s infinite;
632     animation: two_p 5s linear 0s infinite;
633 }
634 
635 .ui_base2 .ball {
636     color: #fff;
637     opacity: 1;
638 }
639 
640 .ui_base2 .ball_1 .ball {
641     transform: rotateY(10deg) rotateZ(10deg);
642     animation: two1 10s linear 0s infinite;
643     -webkit-transition-delay: 1500ms !important;
644     transition-delay: 1500ms !important;
645 }
646 
647 .ui_base2 .ball_2 .ball {
648     -webkit-animation: two2 10s linear 0s infinite;
649     animation: two2 10s linear 0s infinite;
650     -webkit-transition-delay: 1300ms !important;
651     transition-delay: 1300ms !important;
652 }
653 
654 .ui_base2 .ball_3 .ball {
655     -webkit-animation: two3 10s linear 0s infinite;
656     animation: two3 10s linear 0s infinite;
657     -webkit-transition-delay: 1100ms !important;
658     transition-delay: 1100ms !important;
659 }
660 
661 .ui_base2 .ball_4 .ball {
662     -webkit-animation: two4 10s linear 0s infinite;
663     animation: two4 10s linear 0s infinite;
664     -webkit-transition-delay: 900ms !important;
665     transition-delay: 900ms !important;
666 }
667 
668 .ui_base2 .ball_5 .ball {
669     -webkit-animation: two5 10s linear 0s infinite;
670     animation: two5 10s linear 0s infinite;
671     -webkit-transition-delay: 700ms !important;
672     transition-delay: 700ms !important;
673 }
674 
675 .ui_base2 .ball_6 .ball {
676     -webkit-animation: two6 10s linear 0s infinite;
677     animation: two6 10s linear 0s infinite;
678     -webkit-transition-delay: 500ms !important;
679     transition-delay: 500ms !important;
680 }
681 
682 .ui_base2 .ball_7 .ball {
683     -webkit-animation: two6 10s linear 0s infinite;
684     animation: two7 10s linear 0s infinite;
685     -webkit-transition-delay: 300ms !important;
686     transition-delay: 300ms !important;
687 }
688 
689 .ui_base2 .ball_8 .ball {
690     -webkit-animation: two6 10s linear 0s infinite;
691     animation: two8 10s linear 0s infinite;
692     -webkit-transition-delay: 100ms !important;
693     transition-delay: 100ms !important;
694 }
695 
696 .ui_base2 .ball_1 {
697     -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
698     transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
699 }
700 
701 .ui_base2 .ball_2 {
702     -webkit-transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
703     transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
704 }
705 
706 .ui_base2 .ball_3 {
707     -webkit-transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
708     transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
709 }
710 
711 .ui_base2 .ball_4 {
712     -webkit-transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
713     transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
714 }
715 
716 .ui_base2 .ball_5 {
717     -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
718     transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
719 }
720 
721 .ui_base2 .ball_6 {
722     -webkit-transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
723     transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
724 }
725 
726 .ui_base2 .ball_7 {
727     -webkit-transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
728     transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
729 }
730 
731 .ui_base2 .ball_8 {
732     -webkit-transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
733     transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
734 }

原文地址：https://www.cnblogs.com/qinxuhui/p/11669990.html