[原][CSS3]会动的盒子机器人
[PC与移动端皆可]会动的盒子机器人
浏览器必须可以解析perspective属性。
![[原][CSS3]会动的盒子机器人](http://img.e-com-net.com/image/product/73e80971cb6446d6b41319d1c4250936.jpg)
![[原][CSS3]会动的盒子机器人](http://img.e-com-net.com/image/product/1a2879628fb54fe8bae1e98b082b4c00.jpg)
![[原][CSS3]会动的盒子机器人](http://img.e-com-net.com/image/product/7e6a2291aadc4deb993908b29fe15ff4.jpg)
在线：http://wangxinsheng.herokuapp.com/boxMan
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>[WXS]盒子机器人</title> 6 <meta name="author" content="WangXinsheng"> 7 <meta name="apple-mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 9 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no"> 10 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 11 </head> 12 <style> 13 * { 14 -webkit-box-sizing: border-box; 15 -moz-box-sizing: border-box; 16 box-sizing: border-box; 17 } 18 19 body { 20 height: 10em; 21 left: 50%; 22 margin-left: -5em; 23 margin-top: -5em; 24 /*perspective:设置元素被查看位置的视图*/ 25 -webkit-perspective: 1000px; 26 -ms-perspective: 1000px; 27 perspective: 1000px; 28 /*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/ 29 position: absolute; 30 top: 50%; 31 width: 10em; 32 } 33 cube{ 34 position: absolute; 35 -webkit-transform-style: preserve-3d; 36 -ms-transform-style: preserve-3d; 37 transform-style: preserve-3d; 38 -webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg); 39 transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg); 40 } 41 42 cube * { 43 background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1)); 44 border: 2px solid rgba(183,154,112,1); 45 position: absolute; 46 display: block; 47 } 48 49 cube.header { 50 height: 8em; 51 width: 13em; 52 background:none; 53 border:none; 54 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 55 transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 56 } 57 cube.header back { 58 height: 8em; 59 width: 13em; 60 -webkit-transform: rotateX(180deg) translateZ(4em); 61 -ms-transform: rotateX(180deg) translateZ(4em); 62 transform: rotateX(180deg) translateZ(4em); 63 } 64 65 cube.header bottom { 66 height: 8em; 67 width: 13em; 68 -webkit-transform: rotateX(-90deg) translateZ(4em); 69 -ms-transform: rotateX(-90deg) translateZ(4em); 70 transform: rotateX(-90deg) translateZ(4em); 71 display:none; 72 } 73 74 cube.header front { 75 height: 8em; 76 width: 13em; 77 -webkit-transform: rotateY(0deg) translateZ(4em); 78 -ms-transform: rotateY(0deg) translateZ(4em); 79 transform: rotateY(0deg) translateZ(4em); 80 background:url('img/headerFront.png') no-repeat rgb(202,184,160); 81 -moz-background-size:cover; 82 -webkit-background-size:cover; 83 -o-background-size:cover; 84 background-size:cover; 85 } 86 87 cube.header left { 88 height: 8em; 89 width: 8em; 90 -webkit-transform: rotateY(-90deg) translateZ(4em); 91 -ms-transform: rotateY(-90deg) translateZ(4em); 92 transform: rotateY(-90deg) translateZ(4em); 93 } 94 95 cube.header right { 96 height: 8em; 97 width: 8em; 98 -webkit-transform: rotateY(90deg) translateZ(9em); 99 -ms-transform: rotateY(90deg) translateZ(9em); 100 transform: rotateY(90deg) translateZ(9em); 101 } 102 103 cube.header top { 104 height: 8em; 105 width: 13em; 106 -webkit-transform: rotateX(90deg) translateZ(4em); 107 -ms-transform:rotateX(90deg) translateZ(4em); 108 transform: rotateX(90deg) translateZ(4em); 109 } 110 /*------------------------------*/ 111 cube.body.body { 112 height: 10em; 113 width: 6em; 114 background:none; 115 border:none; 116 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 117 transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 118 } 119 cube.body.body back { 120 height: 10em; 121 width: 6em; 122 -webkit-transform: rotateX(180deg) translateZ(3em); 123 -ms-transform: rotateX(180deg) translateZ(3em); 124 transform: rotateX(180deg) translateZ(3em); 125 } 126 127 cube.body.body bottom { 128 height: 6em; 129 width: 6em; 130 -webkit-transform: rotateX(-90deg) translateZ(7em); 131 -ms-transform: rotateX(-90deg) translateZ(7em); 132 transform: rotateX(-90deg) translateZ(7em); 133 } 134 135 cube.body.body front { 136 height: 10em; 137 width: 6em; 138 -webkit-transform: rotateY(0deg) translateZ(3em); 139 -ms-transform: rotateY(0deg) translateZ(3em); 140 transform: rotateY(0deg) translateZ(3em); 141 background-color:rgb(202,184,160,1); 142 background:url('img/bodyFront.png') no-repeat rgb(202,184,160);; 143 -moz-background-size:cover; 144 -webkit-background-size:cover; 145 -o-background-size:cover; 146 background-size:cover; 147 } 148 149 cube.body.body left { 150 height: 10em; 151 width: 6em; 152 -webkit-transform: rotateY(-90deg) translateZ(3em); 153 -ms-transform: rotateY(-90deg) translateZ(3em); 154 transform: rotateY(-90deg) translateZ(3em); 155 } 156 157 cube.body.body right { 158 height: 10em; 159 width: 6em; 160 -webkit-transform: rotateY(90deg) translateZ(3em); 161 -ms-transform: rotateY(90deg) translateZ(3em); 162 transform: rotateY(90deg) translateZ(3em); 163 } 164 165 cube.body.body top { 166 height: 6em; 167 width: 6em; 168 -webkit-transform: rotateX(90deg) translateZ(3em); 169 -ms-transform: rotateX(90deg) translateZ(3em); 170 transform: rotateX(90deg) translateZ(3em); 171 } 172 /*------------------------------*/ 173 cube.hand { 174 height: 8em; 175 width: 3em; 176 background:none; 177 border:none; 178 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 179 transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 180 } 181 cube.hand back { 182 height: 8em; 183 width: 3em; 184 -webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em); 185 -ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em); 186 transform: rotateX(180deg) translateZ(1.5em) translateY(-3em); 187 } 188 189 cube.hand bottom { 190 height: 3em; 191 width: 3em; 192 -webkit-transform: rotateX(-90deg) translateZ(9.5em); 193 -ms-transform: rotateX(-90deg) translateZ(9.5em); 194 transform: rotateX(-90deg) translateZ(9.5em); 195 } 196 197 cube.hand front { 198 height: 8em; 199 width: 3em; 200 -webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em); 201 -ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em); 202 transform: rotateY(0deg) translateZ(1.5em) translateY(3em); 203 } 204 205 cube.hand left { 206 height: 8em; 207 width: 3em; 208 -webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em); 209 -ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em); 210 transform: rotateY(-90deg) translateZ(1.5em) translateY(3em); 211 } 212 213 cube.hand right { 214 height: 8em; 215 width: 3em; 216 -webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em); 217 -ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em); 218 transform: rotateY(90deg) translateZ(1.5em) translateY(3em); 219 } 220 221 cube.hand top { 222 height: 3em; 223 width: 3em; 224 -webkit-transform: rotateX(90deg) translateZ(-1.5em); 225 -ms-transform: rotateX(90deg) translateZ(-1.5em); 226 transform: rotateX(90deg) translateZ(-1.5em); 227 } 228 /*------------------------------*/ 229 cube.foot { 230 height: 8em; 231 width: 2.5em; 232 background:none; 233 border:none; 234 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 235 transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 236 } 237 cube.foot back { 238 height: 8em; 239 width: 2.5em; 240 -webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em); 241 -ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em); 242 transform: rotateX(180deg) translateZ(2.75em) translateY(-3em); 243 } 244 245 cube.foot bottom { 246 height: 5.5em; 247 width: 2.5em; 248 -webkit-transform: rotateX(-90deg) translateZ(8.2em); 249 -ms-transform: rotateX(-90deg) translateZ(8.2em); 250 transform: rotateX(-90deg) translateZ(8.2em); 251 } 252 253 cube.foot front { 254 height: 8em; 255 width: 2.5em; 256 -webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em); 257 -ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em); 258 transform: rotateY(0deg) translateZ(2.75em) translateY(3em); 259 } 260 261 cube.foot left { 262 height: 8em; 263 width: 5.5em; 264 -webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em); 265 -ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em); 266 transform: rotateY(-90deg) translateZ(2.7em) translateY(3em); 267 } 268 269 cube.foot right { 270 height: 8em; 271 width: 5.5em; 272 -webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em); 273 -ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em); 274 transform: rotateY(90deg) translateZ(-0.25em) translateY(3em); 275 } 276 277 cube.foot top { 278 height: 5.5em; 279 width: 2.5em; 280 -webkit-transform: rotateX(90deg) translateZ(-0.25em); 281 -ms-transform: rotateX(90deg) translateZ(-0.25em); 282 transform: rotateX(90deg) translateZ(-0.25em); 283 } 284 /*------------------------------*/ 285 cube.dress { 286 height: 3em; 287 width: 6em; 288 background:none; 289 border:none; 290 -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 291 transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 292 } 293 cube.dress back { 294 height: 3em; 295 width: 6em; 296 -webkit-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em); 297 -ms-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em); 298 transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em); 299 } 300 301 cube.dress front { 302 height: 3em; 303 width: 6em; 304 -webkit-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 305 -ms-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 306 transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 307 } 308 309 cube.dress left { 310 height: 3em; 311 width: 6em; 312 -webkit-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 313 -ms-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 314 transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 315 } 316 317 cube.dress right { 318 height: 3em; 319 width: 6em; 320 -webkit-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 321 -ms-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 322 transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em); 323 } 324 /*------------animate-------------*/ 325 /*--------------------*/ 326 .lHand{ 327 animation: lhand 2s infinite linear; 328 -moz-animation: lhand 2s infinite linear; /* Firefox */ 329 -webkit-animation: lhand 2s infinite linear; /* Safari 和 Chrome */ 330 -webkit-animation-direction:alternate; 331 } 332 @keyframes lhand 333 { 334 from { 335 transform: rotateX(-50deg) rotateZ(-5deg); 336 } 337 to { 338 transform: rotateX(50deg) rotateZ(5deg); 339 } 340 } 341 @-moz-keyframes lhand /* Firefox */ 342 { 343 from { 344 -moz-transform: rotateX(-50deg) rotateZ(-5deg); 345 } 346 to { 347 -moz-transform: rotateX(50deg) rotateZ(5deg); 348 } 349 } 350 @-webkit-keyframes lhand /* Safari 和 Chrome */ 351 { 352 from { 353 -webkit-transform: rotateX(-50deg) rotateZ(-5deg); 354 } 355 to { 356 -webkit-transform: rotateX(50deg) rotateZ(5deg); 357 } 358 } 359 /*--------------------*/ 360 .rHand{ 361 animation: rhand 2s infinite linear; 362 -moz-animation: rhand 2s infinite linear; /* Firefox */ 363 -webkit-animation: rhand 2s infinite linear; /* Safari 和 Chrome */ 364 -webkit-animation-direction:alternate; 365 } 366 @keyframes rhand 367 { 368 from { 369 transform: rotateX(50deg) rotateZ(5deg); 370 } 371 to { 372 transform: rotateX(-50deg) rotateZ(-5deg); 373 } 374 } 375 @-moz-keyframes rhand /* Firefox */ 376 { 377 from { 378 -moz-transform: rotateX(50deg) rotateZ(5deg); 379 } 380 to { 381 -moz-transform: rotateX(-50deg) rotateZ(-5deg); 382 } 383 } 384 @-webkit-keyframes rhand /* Safari 和 Chrome */ 385 { 386 from { 387 -webkit-transform: rotateX(50deg) rotateZ(5deg); 388 } 389 to { 390 -webkit-transform: rotateX(-50deg) rotateZ(-5deg); 391 } 392 } 393 /*--------------------*/ 394 .LFoot{ 395 animation: lfoot 2s infinite linear; 396 -moz-animation: lfoot 2s infinite linear; /* Firefox */ 397 -webkit-animation: lfoot 2s infinite linear; /* Safari 和 Chrome */ 398 -webkit-animation-direction:alternate; 399 } 400 @keyframes lfoot 401 { 402 from { 403 transform: rotateX(30deg) rotateZ(5deg); 404 } 405 to { 406 transform: rotateX(-30deg) rotateZ(-5deg); 407 } 408 } 409 @-moz-keyframes lfoot /* Firefox */ 410 { 411 from { 412 -moz-transform: rotateX(30deg) rotateZ(5deg); 413 } 414 to { 415 -moz-transform: rotateX(-30deg) rotateZ(-5deg); 416 } 417 } 418 @-webkit-keyframes lfoot /* Safari 和 Chrome */ 419 { 420 from { 421 -webkit-transform: rotateX(30deg) rotateZ(5deg); 422 } 423 to { 424 -webkit-transform: rotateX(-30deg) rotateZ(-5deg); 425 } 426 } 427 /*--------------------*/ 428 .rFoot{ 429 animation: rfoot 2s infinite linear; 430 -moz-animation: rfoot 2s infinite linear; /* Firefox */ 431 -webkit-animation: rfoot 2s infinite linear; /* Safari 和 Chrome */ 432 -webkit-animation-direction:alternate; 433 } 434 @keyframes rfoot 435 { 436 from { 437 transform: rotateX(-30deg) rotateZ(-5deg); 438 } 439 to { 440 transform: rotateX(30deg) rotateZ(5deg); 441 } 442 } 443 @-moz-keyframes rfoot /* Firefox */ 444 { 445 from { 446 -moz-transform: rotateX(-30deg) rotateZ(-5deg); 447 } 448 to { 449 -moz-transform: rotateX(30deg) rotateZ(5deg); 450 } 451 } 452 @-webkit-keyframes rfoot /* Safari 和 Chrome */ 453 { 454 from { 455 -webkit-transform: rotateX(-30deg) rotateZ(-5deg); 456 } 457 to { 458 -webkit-transform: rotateX(30deg) rotateZ(5deg); 459 } 460 } 461 /*--------------------*/ 462 .header{ 463 animation: header 3s infinite ease-out; 464 -moz-animation: header 3s infinite ease-out; /* Firefox */ 465 -webkit-animation: header 3s infinite ease-out; /* Safari 和 Chrome */ 466 -webkit-animation-direction:alternate; 467 } 468 @keyframes header 469 { 470 from { 471 transform: rotateX(-8deg) rotateY(-10deg); 472 } 473 to { 474 transform: rotateX(8deg) rotateY(10deg); 475 } 476 } 477 @-moz-keyframes header /* Firefox */ 478 { 479 from { 480 -moz-transform: rotateX(-8deg) rotateY(-10deg); 481 } 482 to { 483 -moz-transform: rotateX(8deg) rotateY(10deg); 484 } 485 } 486 @-webkit-keyframes header /* Safari 和 Chrome */ 487 { 488 from { 489 -webkit-transform: rotateX(-8deg) rotateY(-10deg); 490 } 491 to { 492 -webkit-transform: rotateX(8deg) rotateY(10deg); 493 } 494 } 495 /*--------------------*/ 496 .all{ 497 animation: all 8s infinite linear; 498 -moz-animation: all 8s infinite linear; 499 -webkit-animation: all 8s infinite linear; 500 -webkit-animation-direction:alternate; 501 } 502 @keyframes all 503 { 504 from { 505 transform: rotateY(20deg); 506 } 507 to { 508 transform: rotateY(50deg); 509 } 510 } 511 @-moz-keyframes all /* Firefox */ 512 { 513 from { 514 -moz-transform: rotateY(20deg); 515 } 516 to { 517 -moz-transform: rotateY(50deg); 518 } 519 } 520 @-webkit-keyframes all /* Safari 和 Chrome */ 521 { 522 from { 523 -webkit-transform: rotateY(20deg); 524 } 525 to { 526 -webkit-transform: rotateY(50deg); 527 } 528 } 529 </style> 530 <body> 531 <cube class="all" style=''> 532 <cube class="header" style='top:-6em;left:-3.5em'> 533 <back></back> 534 <bottom></bottom> 535 <front></front> 536 <left></left> 537 <right></right> 538 <top></top> 539 </cube> 540 <cube class="body" style=''> 541 <back></back> 542 <bottom></bottom> 543 <front></front> 544 <left></left> 545 <right></right> 546 <top></top> 547 </cube> 548 <cube class="hand lHand" style='top:0.5em;left:-3.5em;'> 549 <back></back> 550 <bottom></bottom> 551 <front></front> 552 <left></left> 553 <right></right> 554 <top></top> 555 </cube> 556 <cube class="hand rHand" style='top:0.5em;left:6.5em;'> 557 <back></back> 558 <bottom></bottom> 559 <front></front> 560 <left></left> 561 <right></right> 562 <top></top> 563 </cube> 564 <cube class="foot LFoot" style='top:6.5em;left:0.25em;'> 565 <back></back> 566 <bottom></bottom> 567 <front></front> 568 <left></left> 569 <right></right> 570 <top></top> 571 </cube> 572 <cube class="foot rFoot" style='top:6.5em;left:3.25em;'> 573 <back></back> 574 <bottom></bottom> 575 <front></front> 576 <left></left> 577 <right></right> 578 <top></top> 579 </cube> 580 <cube class="dress" style='top:6em;left:0em;'> 581 <back></back> 582 <front></front> 583 <left></left> 584 <right></right> 585 </cube> 586 </cube> 587 <script> 588 </script> 589 </body> 590 </html>