Home > Article > Web Front-end > 利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose
利用CSS3的transform 3D制作的立方体旋转效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:25:171071browse
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：BFC之清除浮动篇&clear_html/css_WEB-ITnoseNext article：HTML object/embed标签的wmode属性_html/css_WEB-ITnose