上代码：
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .box{ | |
| width: 300px; | |
| height: 300px; | |
| margin: 100px auto; | |
| position: relative; | |
| transform-style: preserve-3d; | |
| transform: rotateX(-30deg) rotateY(30deg); | |
| animation: updown 3s linear 3s infinite alternate; | |
| } | |
| @keyframes updown{ | |
| 0%{ | |
| transform: rotateX(-30deg) rotateY(30deg); | |
| } | |
| 100%{ | |
| transform: rotateX(360deg) rotateY(360deg); | |
| } | |
| } | |
| ul{ | |
| list-style: none; | |
| } | |
| .box li{ | |
| width: 100px; | |
| height: 100px; | |
| border: 2px solid #fff; | |
| box-sizing: border-box; | |
| float: left; | |
| position: relative; | |
| } | |
| .box>div{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.5 | |
| } | |
| .box .front{ | |
| /*background-color: deeppink;*/ | |
| transform: translateZ(150px); | |
| } | |
| .box .behind{ | |
| /*background-color: yellow;*/ | |
| transform: translateZ(-150px); | |
| } | |
| .box .left{ | |
| /*background-color: greenyellow;*/ | |
| transform: rotateY(-90deg) translateZ(150px); | |
| } | |
| .box .right{ | |
| /*background-color: red;*/ | |
| transform: rotateY(90deg) translateZ(150px); | |
| } | |
| .box .top{ | |
| /*background-color: deepskyblue;*/ | |
| transform: rotateX(90deg) translateZ(150px); | |
| } | |
| .box .bottom{ | |
| /*background-color: purple;*/ | |
| transform: rotateX(-90deg) translateZ(150px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box"> | |
| <div class="front"></div> | |
| <div class="behind"></div> | |
| <div class="left"></div> | |
| <div class="right"></div> | |
| <div class="top"></div> | |
| <div class="bottom"></div> | |
| </div> | |
| <script src="jquery.js"></script> | |
| <script> | |
| var box = $(".box"); | |
| var divs = box.children(); | |
| var lisColor = ['deeppink','yellow','greenyellow','red','deepskyblue','purple'] | |
| divs.each(function(index,el){ | |
| var ul = $("<ul></ul>"); | |
| for(var i = 0; i < 9; i++){ | |
| var li = $("<li></li>"); | |
| li.css({"backgroundColor":lisColor[index]}); | |
| ul.append(li); | |
| } | |
| $(el).append(ul); | |
| }); | |
| var lisPosition = []; | |
| for(var i = 0; i < 54; i++){ | |
| lisPosition.push(parseInt(Math.random()*350)); | |
| } | |
| $('li').each(function(index,el){ | |
| $(el).css({'left':lisPosition[index],"top":lisPosition[index]}); | |
| }) | |
| $('li').each(function(index,el){ | |
| $(el).animate({'left':0,"top":0},3000); | |
| }) | |
| </script> | |
| </body> | |
| </html> |