利用CSS3的transform 3D制作的立方体旋转效果_html/css

利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose
WBOY
Release： 2016-06-24 11:25:17
Original
1070 people have browsed it
 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>
Copy after login