Heim >Web-Frontend >HTML-Tutorial >利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose
利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:171094Durchsuche
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>3D立方体旋转动画</title> 6 <style type="text/css"> 7 @keyframes rotate{ 8 0%{transform:rotateX(0deg) rotateY(0deg);} 9 100%{transform:rotateX(360deg) rotateY(360deg);}10 }11 @-webkit-keyframes rotate{12 0%{transform:rotateX(0deg) rotateY(0deg);}13 100%{transform:rotateX(360deg) rotateY(360deg);}14 }15 html{background:linear-gradient(#ff0 0%,#3F9 80%);height:100%;}16 .wrap{margin:150px auto;perspective:1000px;width:200px;height:200px;}17 .cube{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 20s infinite linear;}18 .cube > div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform .2s ease-in;-webkit-transition:transform .2s ease-in;}19 .cube > span{display:block;width:100px;height:100px;border:1px solid #000;background-color:#999;position:absolute;top:50px;left:50px;}20 .cube > span img{width:100px;height:100px;}21 .cube .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}22 .cube .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)}23 .cube .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px) rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}24 .cube .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px) rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);}25 .cube .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px) rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);}26 .cube .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px) rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);}27 28 .cube .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}29 .cube .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px) rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)}30 .cube .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px) rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);}31 .cube .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px) rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);}32 .cube .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px) rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);}33 .cube .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px) rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);}34 35 .wrap:hover .cube .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}36 .wrap:hover .cube .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px) rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)}37 .wrap:hover .cube .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px) rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}38 .wrap:hover .cube .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px) rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);}39 .wrap:hover .cube .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px) rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);}40 .wrap:hover .cube .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px) rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}41 </style>42 </head>43 44 <body>45 <div class="wrap">46 <div class="cube">47 <div class="out-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>48 <div class="out-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>49 <div class="out-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>50 <div class="out-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>51 <div class="out-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>52 <div class="out-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></div>53 <span class="in-front"><img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>54 <span class="in-back"><img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>55 <span class="in-left"><img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>56 <span class="in-right"><img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>57 <span class="in-top"><img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>58 <span class="in-bottom"><img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg" alt="利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose" ></span>59 </div>60 </div>61 </body>62 </html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：BFC之清除浮动篇&clear_html/css_WEB-ITnoseNächster Artikel：HTML object/embed标签的wmode属性_html/css_WEB-ITnose