绚丽的3D动画（纯CSS实现，代码有点长啊，在这里不知道怎么折叠起来，讲究看看吧）
效果图：https://bupt-hjm.github.io/css3-3d/（转）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /\*容器\*/ .container{ -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } /\*盒子\*/ .piece-box{ position: relative; width: 200px; height: 200px; margin: 300px auto; perspective-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -moz-animation: pieceRotate 5s; -webkit-animation: pieceRotate 5s; -o-animation: pieceRotate 5s; } .piece-box2{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; animation: boxRotate 5s 10s infinite; -moz-animation: boxRotate 5s 10s infinite; -webkit-animation: boxRotate 5s 10s infinite; -o-animation: boxRotate 5s 10s infinite; } .piece{ position: absolute; width: 200px; height: 200px; background: red; opacity: 0.5; } .piece-1{ background: #ff6666; -webkit-transform: rotateY(0deg) translateZ(173.2px); -ms-transform: rotateY(0deg) translateZ(173.2px); -o-transform: rotateY(0deg) translateZ(173.2px); transform: rotateY(0deg) translateZ(173.2px); animation: piece1Rotate 5s 5s; -webkit-animation: piece1Rotate 5s 5s; -moz-animation: piece1Rotate 5s 5s; -o-animation: piece1Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .piece-2{ background: #006699; -webkit-transform: rotateY(60deg) translateZ(173.2px); -ms-transform: rotateY(60deg) translateZ(173.2px); -o-transform: rotateY(60deg) translateZ(173.2px); transform: rotateY(60deg) translateZ(173.2px); animation: piece2Rotate 5s 5s; -webkit-animation: piece2Rotate 5s 5s; -moz-animation: piece2Rotate 5s 5s; -o-animation: piece2Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .piece-3{ background: #ffff00; -webkit-transform: rotateY(120deg) translateZ(173.2px); -ms-transform: rotateY(120deg) translateZ(173.2px); -o-transform: rotateY(120deg) translateZ(173.2px); transform: rotateY(120deg) translateZ(173.2px); animation: piece3Rotate 5s 5s; -webkit-animation: piece3Rotate 5s 5s; -moz-animation: piece3Rotate 5s 5s; -o-animation: piece3Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .piece-4{ background: #009999; -webkit-transform: rotateY(180deg) translateZ(173.2px); -ms-transform: rotateY(180deg) translateZ(173.2px); -o-transform: rotateY(180deg) translateZ(173.2px); transform: rotateY(180deg) translateZ(173.2px); animation: piece4Rotate 5s 5s; -webkit-animation: piece4Rotate 5s 5s; -moz-animation: piece4Rotate 5s 5s; -o-animation: piece4Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .piece-5{ background: #ff0033; -webkit-transform: rotateY(240deg) translateZ(173.2px); -ms-transform: rotateY(240deg) translateZ(173.2px); -o-transform: rotateY(240deg) translateZ(173.2px); transform: rotateY(240deg) translateZ(173.2px); animation: piece5Rotate 5s 5s; -webkit-animation: piece5Rotate 5s 5s; -moz-animation: piece5Rotate 5s 5s; -o-animation: piece5Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .piece-6{ background: #ff6600; -webkit-transform: rotateY(300deg) translateZ(173.2px); -ms-transform: rotateY(300deg) translateZ(173.2px); -o-transform: rotateY(300deg) translateZ(173.2px); transform: rotateY(300deg) translateZ(173.2px); animation: piece6Rotate 5s 5s; -webkit-animation: piece6Rotate 5s 5s; -moz-animation: piece6Rotate 5s 5s; -o-animation: piece6Rotate 5s 5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes pieceRotate { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @-moz-keyframes pieceRotate { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes pieceRotate { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @-o-keyframes pieceRotate { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes piece1Rotate { 0% { -webkit-transform: rotateY(0deg)translateZ(173.2px); -ms-transform: rotateY(0deg)translateZ(173.2px); -o-transform: rotateY(0deg)translateZ(173.2px); transform: rotateY(0deg)translateZ(173.2px); } 100% { -webkit-transform: rotateY(0deg)translateZ(100px); -ms-transform: rotateY(0deg)translateZ(100px); -o-transform: rotateY(0deg)translateZ(100px); transform: rotateY(0deg)translateZ(100px); } } @-moz-keyframes piece1Rotate { 0% { -webkit-transform: rotateY(0deg)translateZ(173.2px); -ms-transform: rotateY(0deg)translateZ(173.2px); -o-transform: rotateY(0deg)translateZ(173.2px); transform: rotateY(0deg)translateZ(173.2px); } 100% { -webkit-transform: rotateY(0deg)translateZ(100px); -ms-transform: rotateY(0deg)translateZ(100px); -o-transform: rotateY(0deg)translateZ(100px); transform: rotateY(0deg)translateZ(100px); } } @-webkit-keyframes piece1Rotate { 0% { -webkit-transform: rotateY(0deg)translateZ(173.2px); -ms-transform: rotateY(0deg)translateZ(173.2px); -o-transform: rotateY(0deg)translateZ(173.2px); transform: rotateY(0deg)translateZ(173.2px); } 100% { -webkit-transform: rotateY(0deg)translateZ(100px); -ms-transform: rotateY(0deg)translateZ(100px); -o-transform: rotateY(0deg)translateZ(100px); transform: rotateY(0deg)translateZ(100px); } } @-o-keyframes piece1Rotate { 0% { -webkit-transform: rotateY(0deg)translateZ(173.2px); -ms-transform: rotateY(0deg)translateZ(173.2px); -o-transform: rotateY(0deg)translateZ(173.2px); transform: rotateY(0deg)translateZ(173.2px); } 100% { -webkit-transform: rotateY(0deg)translateZ(100px); -ms-transform: rotateY(0deg)translateZ(100px); -o-transform: rotateY(0deg)translateZ(100px); transform: rotateY(0deg)translateZ(100px); } }</head> <body> <div class="container"> <div class="piece-box"> <div class="piece-box2"> <div class="piece piece-1"></div> <div class="piece piece-2"></div> <div class="piece piece-3"></div> <div class="piece piece-4"></div> <div class="piece piece-5"></div> <div class="piece piece-6"></div> </div> </div> </div> </body> </html>1 @keyframes piece2Rotate { 2 0% { 3 -webkit-transform: translateX(173.2px)rotateY(0deg); 4 -ms-transform: translateX(173.2px)rotateY(0deg); 5 -o-transform: translateX(173.2px)rotateY(0deg); 6 transform: translateX(173.2px)rotateY(0deg); 7 } 8 100% { 9 -webkit-transform: translateY(100px)rotateX(90deg); 10 -ms-transform: translateY(100px)rotateX(90deg); 11 -o-transform: translateY(100px)rotateX(90deg); 12 transform: translateY(100px)rotateX(90deg); 13 } 14 } 15 @-moz-keyframes piece2Rotate { 16 0% { 17 -webkit-transform: translateX(173.2px)rotateY(0deg); 18 -ms-transform: translateX(173.2px)rotateY(0deg); 19 -o-transform: translateX(173.2px)rotateY(0deg); 20 transform: translateX(173.2px)rotateY(0deg); 21 } 22 100% { 23 -webkit-transform: translateY(100px)rotateX(90deg); 24 -ms-transform: translateY(100px)rotateX(90deg); 25 -o-transform: translateY(100px)rotateX(90deg); 26 transform: translateY(100px)rotateX(90deg); 27 } 28 } 29 @-webkit-keyframes piece2Rotate { 30 0% { 31 -webkit-transform: translateX(173.2px)rotateY(0deg); 32 -ms-transform: translateX(173.2px)rotateY(0deg); 33 -o-transform: translateX(173.2px)rotateY(0deg); 34 transform: translateX(173.2px)rotateY(0deg); 35 } 36 100% { 37 -webkit-transform: translateY(100px)rotateX(90deg); 38 -ms-transform: translateY(100px)rotateX(90deg); 39 -o-transform: translateY(100px)rotateX(90deg); 40 transform: translateY(100px)rotateX(90deg); 41 } 42 } 43 @-o-keyframes piece2Rotate { 44 0% { 45 -webkit-transform: translateX(173.2px)rotateY(0deg); 46 -ms-transform: translateX(173.2px)rotateY(0deg); 47 -o-transform: translateX(173.2px)rotateY(0deg); 48 transform: translateX(173.2px)rotateY(0deg); 49 } 50 100% { 51 -webkit-transform: translateY(100px)rotateX(90deg); 52 -ms-transform: translateY(100px)rotateX(90deg); 53 -o-transform: translateY(100px)rotateX(90deg); 54 transform: translateY(100px)rotateX(90deg); 55 } 56 } 57 58 @keyframes piece3Rotate { 59 0% { 60 -webkit-transform: translateX(173.2px)rotateY(0deg); 61 -ms-transform: translateX(173.2px)rotateY(0deg); 62 -o-transform: translateX(173.2px)rotateY(0deg); 63 transform: translateX(173.2px)rotateY(0deg); 64 } 65 100% { 66 -webkit-transform: translateX(100px)rotateY(90deg); 67 -ms-transform: translateX(100px)rotateY(90deg); 68 -o-transform: translateX(100px)rotateY(90deg); 69 transform: translateX(100px)rotateY(90deg); 70 } 71 } 72 @-moz-keyframes piece3Rotate { 73 0% { 74 -webkit-transform: translateX(173.2px)rotateY(0deg); 75 -ms-transform: translateX(173.2px)rotateY(0deg); 76 -o-transform: translateX(173.2px)rotateY(0deg); 77 transform: translateX(173.2px)rotateY(0deg); 78 } 79 100% { 80 -webkit-transform: translateX(100px)rotateY(90deg); 81 -ms-transform: translateX(100px)rotateY(90deg); 82 -o-transform: translateX(100px)rotateY(90deg); 83 transform: translateX(100px)rotateY(90deg); 84 } 85 } 86 @-webkit-keyframes piece3Rotate { 87 0% { 88 -webkit-transform: translateX(173.2px)rotateY(0deg); 89 -ms-transform: translateX(173.2px)rotateY(0deg); 90 -o-transform: translateX(173.2px)rotateY(0deg); 91 transform: translateX(173.2px)rotateY(0deg); 92 } 93 100% { 94 -webkit-transform: translateX(100px)rotateY(90deg); 95 -ms-transform: translateX(100px)rotateY(90deg); 96 -o-transform: translateX(100px)rotateY(90deg); 97 transform: translateX(100px)rotateY(90deg); 98 } 99 } 100 @-o-keyframes piece3Rotate { 101 0% { 102 -webkit-transform: translateX(173.2px)rotateY(0deg); 103 -ms-transform: translateX(173.2px)rotateY(0deg); 104 -o-transform: translateX(173.2px)rotateY(0deg); 105 transform: translateX(173.2px)rotateY(0deg); 106 } 107 100% { 108 -webkit-transform: translateX(100px)rotateY(90deg); 109 -ms-transform: translateX(100px)rotateY(90deg); 110 -o-transform: translateX(100px)rotateY(90deg); 111 transform: translateX(100px)rotateY(90deg); 112 } 113 } 114 115 @keyframes piece4Rotate { 116 0% { 117 -webkit-transform: rotateY(0deg)translateZ(173.2px); 118 -ms-transform: rotateY(0deg)translateZ(173.2px); 119 -o-transform: rotateY(0deg)translateZ(173.2px); 120 transform: rotateY(0deg)translateZ(173.2px); 121 } 122 100% { 123 -webkit-transform: rotateY(0deg)translateZ(-100px); 124 -ms-transform: rotateY(0deg)translateZ(-100px); 125 -o-transform: rotateY(0deg)translateZ(-100px); 126 transform: rotateY(0deg)translateZ(-100px); 127 } 128 } 129 @-moz-keyframes piece4Rotate { 130 0% { 131 -webkit-transform: rotateY(0deg)translateZ(173.2px); 132 -ms-transform: rotateY(0deg)translateZ(173.2px); 133 -o-transform: rotateY(0deg)translateZ(173.2px); 134 transform: rotateY(0deg)translateZ(173.2px); 135 } 136 100% { 137 -webkit-transform: rotateY(0deg)translateZ(-100px); 138 -ms-transform: rotateY(0deg)translateZ(-100px); 139 -o-transform: rotateY(0deg)translateZ(-100px); 140 transform: rotateY(0deg)translateZ(-100px); 141 } 142 } 143 @-webkit-keyframes piece4Rotate { 144 0% { 145 -webkit-transform: rotateY(0deg)translateZ(173.2px); 146 -ms-transform: rotateY(0deg)translateZ(173.2px); 147 -o-transform: rotateY(0deg)translateZ(173.2px); 148 transform: rotateY(0deg)translateZ(173.2px); 149 } 150 100% { 151 -webkit-transform: rotateY(0deg)translateZ(-100px); 152 -ms-transform: rotateY(0deg)translateZ(-100px); 153 -o-transform: rotateY(0deg)translateZ(-100px); 154 transform: rotateY(0deg)translateZ(-100px); 155 } 156 } 157 @-o-keyframes piece4Rotate { 158 0% { 159 -webkit-transform: rotateY(0deg)translateZ(173.2px); 160 -ms-transform: rotateY(0deg)translateZ(173.2px); 161 -o-transform: rotateY(0deg)translateZ(173.2px); 162 transform: rotateY(0deg)translateZ(173.2px); 163 } 164 100% { 165 -webkit-transform: rotateY(0deg)translateZ(-100px); 166 -ms-transform: rotateY(0deg)translateZ(-100px); 167 -o-transform: rotateY(0deg)translateZ(-100px); 168 transform: rotateY(0deg)translateZ(-100px); 169 } 170 } 171 172 @keyframes piece5Rotate { 173 0% { 174 -webkit-transform: translateX(173.2px)rotateY(0deg); 175 -ms-transform: translateX(173.2px)rotateY(0deg); 176 -o-transform: translateX(173.2px)rotateY(0deg); 177 transform: translateX(173.2px)rotateY(0deg); 178 } 179 100% { 180 -webkit-transform: translateX(-100px)rotateY(90deg); 181 -ms-transform: translateX(-100px)rotateY(90deg); 182 -o-transform: translateX(-100px)rotateY(90deg); 183 transform: translateX(-100px)rotateY(90deg); 184 } 185 } 186 @-moz-keyframes piece5Rotate { 187 0% { 188 -webkit-transform: translateX(173.2px)rotateY(0deg); 189 -ms-transform: translateX(173.2px)rotateY(0deg); 190 -o-transform: translateX(173.2px)rotateY(0deg); 191 transform: translateX(173.2px)rotateY(0deg); 192 } 193 100% { 194 -webkit-transform: translateX(-100px)rotateY(90deg); 195 -ms-transform: translateX(-100px)rotateY(90deg); 196 -o-transform: translateX(-100px)rotateY(90deg); 197 transform: translateX(-100px)rotateY(90deg); 198 } 199 } 200 @-webkit-keyframes piece5Rotate { 201 0% { 202 -webkit-transform: translateX(173.2px)rotateY(0deg); 203 -ms-transform: translateX(173.2px)rotateY(0deg); 204 -o-transform: translateX(173.2px)rotateY(0deg); 205 transform: translateX(173.2px)rotateY(0deg); 206 } 207 100% { 208 -webkit-transform: translateX(-100px)rotateY(90deg); 209 -ms-transform: translateX(-100px)rotateY(90deg); 210 -o-transform: translateX(-100px)rotateY(90deg); 211 transform: translateX(-100px)rotateY(90deg); 212 } 213 } 214 @-o-keyframes piece5Rotate { 215 0% { 216 -webkit-transform: translateX(173.2px)rotateY(0deg); 217 -ms-transform: translateX(173.2px)rotateY(0deg); 218 -o-transform: translateX(173.2px)rotateY(0deg); 219 transform: translateX(173.2px)rotateY(0deg); 220 } 221 100% { 222 -webkit-transform: translateX(-100px)rotateY(90deg); 223 -ms-transform: translateX(-100px)rotateY(90deg); 224 -o-transform: translateX(-100px)rotateY(90deg); 225 transform: translateX(-100px)rotateY(90deg); 226 } 227 } 228 229 @keyframes piece6Rotate { 230 0% { 231 -webkit-transform: translateX(173.2px)rotateY(0deg); 232 -ms-transform: translateX(173.2px)rotateY(0deg); 233 -o-transform: translateX(173.2px)rotateY(0deg); 234 transform: translateX(173.2px)rotateY(0deg); 235 } 236 100% { 237 -webkit-transform: translateY(-100px)rotateX(90deg); 238 -ms-transform: translateY(-100px)rotateX(90deg); 239 -o-transform: translateY(-100px)rotateX(90deg); 240 transform: translateY(-100px)rotateX(90deg); 241 } 242 } 243 @-moz-keyframes piece6Rotate { 244 0% { 245 -webkit-transform: translateX(173.2px)rotateY(0deg); 246 -ms-transform: translateX(173.2px)rotateY(0deg); 247 -o-transform: translateX(173.2px)rotateY(0deg); 248 transform: translateX(173.2px)rotateY(0deg); 249 } 250 100% { 251 -webkit-transform: translateY(-100px)rotateX(90deg); 252 -ms-transform: translateY(-100px)rotateX(90deg); 253 -o-transform: translateY(-100px)rotateX(90deg); 254 transform: translateY(-100px)rotateX(90deg); 255 } 256 } 257 @-webkit-keyframes piece6Rotate { 258 0% { 259 -webkit-transform: translateX(173.2px)rotateY(0deg); 260 -ms-transform: translateX(173.2px)rotateY(0deg); 261 -o-transform: translateX(173.2px)rotateY(0deg); 262 transform: translateX(173.2px)rotateY(0deg); 263 } 264 100% { 265 -webkit-transform: translateY(-100px)rotateX(90deg); 266 -ms-transform: translateY(-100px)rotateX(90deg); 267 -o-transform: translateY(-100px)rotateX(90deg); 268 transform: translateY(-100px)rotateX(90deg); 269 } 270 } 271 @-o-keyframes piece6Rotate { 272 0% { 273 -webkit-transform: translateX(173.2px)rotateY(0deg); 274 -ms-transform: translateX(173.2px)rotateY(0deg); 275 -o-transform: translateX(173.2px)rotateY(0deg); 276 transform: translateX(173.2px)rotateY(0deg); 277 } 278 100% { 279 -webkit-transform: translateY(-100px)rotateX(90deg); 280 -ms-transform: translateY(-100px)rotateX(90deg); 281 -o-transform: translateY(-100px)rotateX(90deg); 282 transform: translateY(-100px)rotateX(90deg); 283 } 284 } 285 286 @keyframes boxRotate { 287 0% { 288 -webkit-transform: rotateX(0deg)rotateY(0deg); 289 -ms-transform: rotateX(0deg)rotateY(0deg); 290 -o-transform: rotateX(0deg)rotateY(0deg); 291 transform: rotateX(0deg)rotateY(0deg); 292 } 293 100% { 294 -webkit-transform: rotateX(360deg)rotateY(360deg); 295 -ms-transform: rotateX(360deg)rotateY(360deg); 296 -o-transform: rotateX(360deg)rotateY(360deg); 297 transform: rotateX(360deg)rotateY(360deg); 298 } 299 } 300 @-moz-keyframes boxRotate { 301 0% { 302 -webkit-transform: rotateX(0deg)rotateY(0deg); 303 -ms-transform: rotateX(0deg)rotateY(0deg); 304 -o-transform: rotateX(0deg)rotateY(0deg); 305 transform: rotateX(0deg)rotateY(0deg); 306 } 307 100% { 308 -webkit-transform: rotateX(360deg)rotateY(360deg); 309 -ms-transform: rotateX(360deg)rotateY(360deg); 310 -o-transform: rotateX(360deg)rotateY(360deg); 311 transform: rotateX(360deg)rotateY(360deg); 312 } 313 } 314 @-webkit-keyframes boxRotate { 315 0% { 316 -webkit-transform: rotateX(0deg)rotateY(0deg); 317 -ms-transform: rotateX(0deg)rotateY(0deg); 318 -o-transform: rotateX(0deg)rotateY(0deg); 319 transform: rotateX(0deg)rotateY(0deg); 320 } 321 100% { 322 -webkit-transform: rotateX(360deg)rotateY(360deg); 323 -ms-transform: rotateX(360deg)rotateY(360deg); 324 -o-transform: rotateX(360deg)rotateY(360deg); 325 transform: rotateX(360deg)rotateY(360deg); 326 } 327 } 328 @-o-keyframes boxRotate { 329 0% { 330 -webkit-transform: rotateX(0deg)rotateY(0deg); 331 -ms-transform: rotateX(0deg)rotateY(0deg); 332 -o-transform: rotateX(0deg)rotateY(0deg); 333 transform: rotateX(0deg)rotateY(0deg); 334 } 335 100% { 336 -webkit-transform: rotateX(360deg)rotateY(360deg); 337 -ms-transform: rotateX(360deg)rotateY(360deg); 338 -o-transform: rotateX(360deg)rotateY(360deg); 339 transform: rotateX(360deg)rotateY(360deg); 340 } 341 } 342 343</style>