[CSS3]会动的盒子机器人_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

[CSS3]会动的盒子机器人_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

[PC与移动端皆可]会动的盒子机器人

浏览器必须可以解析perspective属性。

在线：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 lhand333 {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 rhand367 {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 lfoot401 {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 rfoot435 {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 header469 {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 all503 {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>

로그인 후 복사

rar：http://download.csdn.net/detail/wangxsh42/8565415

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7564

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

100

Related knowledge

& lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles