css實現3D盒子效果
阿新 • • 發佈：2017-08-26
origin fin courier ora 設置 blog select 5% solid
--------------------------------------
用css3的新屬性來設置3D盒
子效果（chrome瀏覽器），
代碼如下：
-------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D-box</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0; 10 -webkit-user-select:none; 11 } 12 .wrap{ 13 width:100px; 14 height:100px; 15 padding:100px; 16 border:5px solid black; 17 margin:160px auto; 18 -webkit-perspective:600px; //設置景深; 19 -webkit-transform:scale(1); //縮放倍數; 20 } 21 .box{ 22 animation:change 6s linear infinite; //設置動畫效果; 23 width:100px; 24 height:100px; 25 position:relative; 26 -webkit-transform-style:preserve-3d; //指定3D樣式; 27 transition:5s; //設置動畫完成一次所用時間; 28 -webkit-transform-origin:center center -50px; //設置旋轉中心點; 29 } 30 .box div{ 31 width:100px; 32 height:100px; 33 position:absolute; 34 color:black; 35 font-family:"Courier New"; 36 font-size:60px; 37 line-height:100px; 38 text-align:center; 39 } 40 .box div:nth-of-type(1){ 41 left:0; 42 top:-100px; 43 background:red; 44 -webkit-transform-origin:bottom; //旋轉的軸; 45 -webkit-transform:rotateX(90deg); //沿著x軸旋轉90度; 46 } 47 .box div:nth-of-type(2){ 48 left:-100px; 49 top:0; 50 background:yellow; 51 -webkit-transform-origin:right; 52 -webkit-transform:rotateY(-90deg); 53 } 54 .box div:nth-of-type(3){ 55 left:0; 56 top:0; 57 background:blue; 58 } 59 .box div:nth-of-type(4){ 60 left:100px; 61 top:0; 62 background:green; 63 -webkit-transform-origin:left; 64 -webkit-transform:rotateY(90deg); 65 } 66 .box div:nth-of-type(5){ 67 left:0; 68 top:100px; 69 background:purple; 70 -webkit-transform-origin:top; 71 -webkit-transform:rotateX(-90deg); 72 } 73 .box div:nth-of-type(6){ 74 left:0; 75 top:0; 76 background:orange; 77 -webkit-transform:translateZ(-100px) rotateY(180deg); 78 } 79 @keyframes change{ //設置每一段的的變化效果， 80 25%{-webkit-transform:rotateY(180deg);} 81 50%{-webkit-transform:rotateY(360deg);} 82 75%{-webkit-transform:rotateX(180deg);} 83 100%{-webkit-transform:rotateX(360deg);} 84 } 85 </style> 86 </head> 87 <body> 88 <div class="wrap"> 89 <div class="box"> 90 <div>1</div> 91 <div>2</div> 92 <div>3</div> 93 <div>4</div> 94 <div>5</div> 95 <div>6</div> 96 </div> 97 </div> 98 </body> 99 </html>
----------------------------------------
原理：利用十字型分別
折疊90度各邊拼接成
3D的盒子；
-----------------over-----------------
感謝你的閱讀；
css實現3D盒子效果