正方体合成

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         ul{margin:0;padding:0;list-style:none}
 8         .box{height:100px;width:100px;-webkit-perspective:500px;perspective:500px;margin:50px 0 0 50px}
 9         .list{position:relative;height:100px;width:100px;background-color:#00f;-webkit-transform-style:preserve-3d;-webkit-transform-origin:50% 50% 50px;-webkit-animation:rotate1 1s 10s 3 linear;transform-style:preserve-3d;transform-origin:0 0 0;animation:rotate1 1s 10s 3 both linear}
10         .in{position:absolute;height:100px;width:100px}
11         .list .in:nth-child(6){background-color:pink;-webkit-transform-origin:top;transform-origin:top;-webkit-animation:in6 2s both;animation:in6 2s both}
12         .list .in:nth-child(5){background-color:#90ee90;-webkit-transform-origin:right;-webkit-animation:in5 2s 2s both;transform-origin:right;animation:in5 2s 2s both}
13         .list .in:nth-child(4){background-color:#add8e6;-webkit-transform-origin:bottom;-webkit-animation:in4 2s 4s both;transform-origin:bottom;animation:in4 2s 4s both}
14         .list .in:nth-child(3){background-color:#f08080;-webkit-transform-origin:left;-webkit-animation:in3 2s 6s both;transform-origin:left;animation:in3 2s 6s both}
15         .list .in:nth-child(2){background-color:#e0ffff;-webkit-animation:in2 2s 8s both;animation:in2 2s 8s both}
16         .list .in:nth-child(1){background-color:#ffa07a}
17         .box:hover .list{-webkit-animation-play-state:paused;animation-play-state:paused}
18         .box:hover .in{-webkit-animation-play-state:paused;animation-play-state:paused}
19         @-webkit-keyframes in6{100%{-webkit-transform:rotateX(90deg)}}
20         @-webkit-keyframes in5{100%{-webkit-transform:rotateY(90deg)}}
21         @-webkit-keyframes in4{100%{-webkit-transform:rotateX(-90deg)}}
22         @-webkit-keyframes in3{100%{-webkit-transform:rotateY(-90deg)}}
23         @-webkit-keyframes in2{100%{-webkit-transform:translateZ(100px)}}
24         @-webkit-keyframes rotate1{100%{-webkit-transform:rotateY(360deg)}}
25         @keyframes in6{100%{transform:rotateX(90deg)}}
26         @keyframes in5{100%{transform:rotateY(90deg)}}
27         @keyframes in4{100%{transform:rotateX(-90deg)}}
28         @keyframes in3{100%{transform:rotateY(-90deg)}}
29         @keyframes in2{100%{transform:translateZ(100px)}}
30         @keyframes rotate1{100%{transform:rotate3d(1,1,1,360deg)}}
31     </style>
32 </head>
33 <body>
34 <div class="box">
35     <ul class="list" id="list">
36         <li class="in"></li>
37         <li class="in"></li>
38         <li class="in"></li>
39         <li class="in"></li>
40         <li class="in"></li>
41         <li class="in"></li>
42     </ul>
43 </div>
44 </body>
45 </html>

 

posted @ 2016-10-10 14:39  菜蛋  阅读(272)  评论(0)    收藏  举报