CSS部分
1 <style> 2 * { 3 margin: 0; 4 padding: 0 5 } 6 :root{ 7 background: #666; 8 } 9 10 #content { 11 /* display: flex; */ 12 /* 1200px; */ 13 /* height: 200px; */ 14 width: 134px; 15 height: 134px; 16 /* justify-content: space-around; */ 17 /* align-items: center; */ 18 /* margin: 20px auto; */ 19 transform-style: preserve-3d; 20 transform: rotateY(30deg) rotateX(-20deg); 21 22 /* transition: all 2s 5s; */ 23 position: absolute; 24 left:0; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 margin: auto; 29 } 30 31 /* #content:hover{ 32 transform: rotateY(360deg) rotateX(20deg) 33 } */ 34 35 @keyframes move1{ 36 0%{transform: rotateY(30deg) rotateX(-20deg);} 37 20%{transform: rotateY(3600deg) rotateX(3600deg)} 38 90%{transform: rotateY(3600deg) rotateX(3600deg)} 39 100%{transform: rotateY(30deg) rotateX(-20deg);} 40 } 41 @keyframes move2{ 42 0%{transform: rotateY(30deg) rotateX(-20deg);} 43 20%{transform: rotateY(3510deg) rotateX(3600deg)} 44 90%{transform: rotateY(3510deg) rotateX(3600deg)} 45 100%{transform: rotateY(30deg) rotateX(-20deg);} 46 } 47 @keyframes move3{ 48 0%{transform: rotateY(30deg) rotateX(-20deg);} 49 20%{transform: rotateY(3690deg) rotateX(3600deg)} 50 90%{transform: rotateY(3690deg) rotateX(3600deg)} 51 100%{transform: rotateY(30deg) rotateX(-20deg);} 52 } 53 @keyframes move4{ 54 0%{transform: rotateY(30deg) rotateX(-20deg);} 55 20%{transform: rotateY(3780deg) rotateX(3600deg)} 56 90%{transform: rotateY(3780deg) rotateX(3600deg)} 57 100%{transform: rotateY(30deg) rotateX(-20deg);} 58 } 59 @keyframes move5{ 60 0%{transform: rotateY(30deg) rotateX(-20deg);} 61 20%{transform: rotateY(3600deg) rotateX(3690deg)} 62 90%{transform: rotateY(3600deg) rotateX(3690deg)} 63 100%{transform: rotateY(30deg) rotateX(-20deg);} 64 } 65 @keyframes move6{ 66 0%{transform: rotateY(30deg) rotateX(-20deg);} 67 20%{transform: rotateY(3600deg) rotateX(3510deg)} 68 90%{transform: rotateY(3600deg) rotateX(3510deg)} 69 100%{transform: rotateY(30deg) rotateX(-20deg);} 70 } 71 72 #content>div{ 73 width: 100px; 74 height: 100px; 75 padding: 15px; 76 display: flex; 77 background: #fff; 78 border-radius: 15px; 79 position: absolute; 80 /* box-shadow: 2px 1px 5px #333; */ 81 border: 2px solid #eee; 82 } 83 84 #content span{ 85 width: 25px; 86 height: 25px; 87 display: block; 88 border-radius: 50%; 89 background: #c33; 90 }
//筛子布局 91 /* 1 */ 92 #content>div:nth-child(1){ 93 justify-content: center; 94 align-items: center; 95 transform: translateZ(65px) 96 } 97 98 /* 2 */ 99 #content>div:nth-child(2){ 100 justify-content: space-between; 101 align-items: center; 102 transform: translateZ(-65px) 103 } 104 /* 3 */ 105 #content>div:nth-child(3){ 106 justify-content: space-between; 107 transform: rotateX(90deg) translateZ(65px) 108 } 109 110 #content>div:nth-child(3) span:nth-child(2){ 111 align-self: center; 112 } 113 114 #content>div:nth-child(3) span:nth-child(3){ 115 align-self: flex-end; 116 } 117 /* 4 */ 118 #content>div:nth-child(4){ 119 transform: rotateX(90deg) translateZ(-65px); 120 justify-content: space-between; 121 } 122 123 #content>div:nth-child(4) div{ 124 display: flex; 125 flex-direction: column; 126 justify-content: space-between; 127 } 128 /* 5 */ 129 #content>div:nth-child(5){ 130 transform: rotateY(90deg) translateZ(65px); 131 justify-content: space-between; 132 } 133 134 #content>div:nth-child(5) div{ 135 display: flex; 136 flex-direction: column; 137 justify-content: space-between; 138 } 139 140 #content>div:nth-child(5) div:nth-child(2){ 141 justify-content: center; 142 } 143 /* 6 */ 144 #content>div:nth-child(6){ 145 transform: rotateY(90deg) translateZ(-65px); 146 justify-content: space-between; 147 } 148 149 #content>div:nth-child(6) div{ 150 display: flex; 151 flex-direction: column; 152 justify-content: space-between; 153 } 154 155 </style>
html部分
1 <body> 2 <div id="content"> 3 <!-- 第一个筛子 --> 4 <div> 5 <span></span> 6 </div> 7 8 <!-- 第二个筛子 --> 9 <div> 10 <span></span> 11 <span></span> 12 </div> 13 14 <!-- 第三个筛子 --> 15 <div> 16 <span></span> 17 <span></span> 18 <span></span> 19 </div> 20 21 <!-- 第四个 --> 22 23 <div> 24 <div> 25 <span></span> 26 <span></span> 27 </div> 28 <div> 29 <span></span> 30 <span></span> 31 </div> 32 </div> 33 <!-- 第五个 --> 34 <div> 35 <div> 36 <span></span> 37 <span></span> 38 </div> 39 <div> 40 <span></span> 41 </div> 42 <div> 43 <span></span> 44 <span></span> 45 </div> 46 </div> 47 <!-- 第六个--> 48 <div> 49 <div> 50 <span></span> 51 <span></span> 52 <span></span> 53 </div> 54 <div> 55 <span></span> 56 <span></span> 57 <span></span> 58 </div> 59 </div> 60 </div> 61 </body>
JS部分
1 $("#content").click(function(){ 2 var num = parseInt(1+Math.random()*6) 3 $("#content").css("animation","move"+num+" 5s ease-in-out 1")