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>