剛發現一個網站上面的3D立方體效果挺好看的，就模仿着用CSS3實現了一個類似的效果：http://39.105.101.122/myhtml/CSS/transform_3D/cube_3D.html
沒有做IE的兼容，在谷歌瀏覽器里面打開可以看到效果。
這樣的3D透視效果主要是用了perspective和transform-style: preserve-3d;這兩個屬性。然后在相應的元素上添加transform就行了。
先看一下布局結構：
<div class="container"> <div class="box"> <ul class="cube_1"> <li><img src="../Img/1.jpg"></li> <li><img src="../Img/2.jpg"></li> <li><img src="../Img/3.jpg"></li> <li><img src="../Img/4.jpg"></li> <li><img src="../Img/5.jpg"></li> <li><img src="../Img/6.jpg"></li> </ul> <ul class="cube_2"> <li><img src="../Img/7.jpg"></li> <li><img src="../Img/8.jpg"></li> <li><img src="../Img/9.jpg"></li> <li><img src="../Img/1.jpg"></li> <li><img src="../Img/2.jpg"></li> <li><img src="../Img/3.jpg"></li> </ul> </div> </div>
container放在頁面的適當位置，box放在container的中間位置。cube_1是外面的小正方體，cube_2是外面的小正方體。設置 ul 和 li 的position為absolute，居中定位，然后讓每張圖片繞Y軸或X軸旋轉相應的角度，然后向Z軸移動相應的距離。布局完成后添加相應的動畫，和鼠標移入的變化。
注意點：perspective和transform-style這兩個屬性我分別用在了cube_1和cube_2上面，設置透明度顯示出來之后外面的立方體對里面的立方體沒有遮擋的效果，我想這應該是cube_1和cube_2分別使用上述兩個屬性導致隔離開來互不影響的結果，然后又給container添加了transform-style:preserve-3d;發現遮擋效果出現了。問題解決。
代碼寫的有點亂，也比較臃腫：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cube_3D</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .container{ 13 width: 800px; 14 height: 500px; 15 background-color: #ccc; 16 margin: 50px auto; 17 position: relative; 18 } 19 .container .box{ 20 margin: auto; 21 position: absolute; 22 width: 1px; 23 height: 1px; 24 top: 0; 25 left: 0; 26 bottom: 0; 27 right: 0; 28 background-color: red; 29 transform-style: preserve-3d; 30 } 31 @keyframes an1{ 32 0%{ 33 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); 34 } 35 25%{ 36 transform: rotateY(180deg) rotateX(45deg) rotateZ(0deg); 37 } 38 50%{ 39 transform: rotateY(360deg) rotateX(45deg) rotateZ(0deg); 40 } 41 75%{ 42 transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg); 43 } 44 100%{ 45 transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); 46 } 47 } 48 .container .box .cube_1{ 49 list-style: none; 50 width: 200px; 51 height: 200px; 52 margin: -100px -100px; 53 position: absolute; 54 perspective: 4000px; 55 transform-style: preserve-3d; 56 animation: an1 10s linear 0s infinite; 57 } 58 .container .box .cube_1 li{ 59 position: absolute; 60 width: 200px; 61 height: 200px; 62 opacity: 0.5; 63 transition: transform .2s ease-in 0s; 64 } 65 .container .box .cube_1 li img{ 66 width: 200px; 67 height: 200px; 68 } 69 .container .box .cube_1 li:nth-child(1){ 70 transform: rotateY(0deg) translateZ(100px); 71 transition: all 1s ease-in 0; 72 } 73 .container .box .cube_1 li:nth-child(2){ 74 transform: rotateY(90deg) translateZ(100px); 75 } 76 .container .box .cube_1 li:nth-child(3){ 77 transform: rotateY(180deg) translateZ(100px); 78 } 79 .container .box .cube_1 li:nth-child(4){ 80 transform: rotateY(270deg) translateZ(100px); 81 } 82 .container .box .cube_1 li:nth-child(5){ 83 transform: rotateX(90deg) translateZ(100px); 84 } 85 .container .box .cube_1 li:nth-child(6){ 86 transform: rotateX(-90deg) translateZ(100px); 87 } 88 89 .container .box .cube_2{ 90 list-style: none; 91 width: 100px; 92 height: 100px; 93 position: absolute; 94 margin: -50px -50px; 95 perspective: 4000px; 96 transform-style: preserve-3d; 97 animation: an1 10s linear 0s infinite; 98 } 99 .container .box .cube_2 li{ 100 position: absolute; 101 width: 100px; 102 height: 100px; 103 } 104 .container .box .cube_2 li img{ 105 width: 100px; 106 height: 100px; 107 } 108 .container .box .cube_2 li:nth-child(1){ 109 transform: rotateY(0deg) translateZ(50px); 110 } 111 .container .box .cube_2 li:nth-child(2){ 112 transform: rotateY(90deg) translateZ(50px); 113 } 114 .container .box .cube_2 li:nth-child(3){ 115 transform: rotateY(180deg) translateZ(50px); 116 } 117 .container .box .cube_2 li:nth-child(4){ 118 transform: rotateY(270deg) translateZ(50px); 119 } 120 .container .box .cube_2 li:nth-child(5){ 121 transform: rotateX(90deg) translateZ(50px); 122 } 123 .container .box .cube_2 li:nth-child(6){ 124 transform: rotateX(-90deg) translateZ(50px); 125 } 126 127 .container .box:hover .cube_1 li:nth-child(1){ 128 transform: rotateY(0deg) translateZ(200px); 129 } 130 .container .box:hover .cube_1 li:nth-child(2){ 131 transform: rotateY(90deg) translateZ(200px); 132 } 133 .container .box:hover .cube_1 li:nth-child(3){ 134 transform: rotateY(180deg) translateZ(200px); 135 } 136 .container .box:hover .cube_1 li:nth-child(4){ 137 transform: rotateY(270deg) translateZ(200px); 138 } 139 .container .box:hover .cube_1 li:nth-child(5){ 140 transform: rotateX(90deg) translateZ(200px); 141 } 142 .container .box:hover .cube_1 li:nth-child(6){ 143 transform: rotateX(-90deg) translateZ(200px); 144 } 145 </style> 146 <body> 147 <div class="container"> 148 <div class="box"> 149 <ul class="cube_1"> 150 <li><img src="../Img/1.jpg"></li> 151 <li><img src="../Img/2.jpg"></li> 152 <li><img src="../Img/3.jpg"></li> 153 <li><img src="../Img/4.jpg"></li> 154 <li><img src="../Img/5.jpg"></li> 155 <li><img src="../Img/6.jpg"></li> 156 </ul> 157 <ul class="cube_2"> 158 <li><img src="../Img/7.jpg"></li> 159 <li><img src="../Img/8.jpg"></li> 160 <li><img src="../Img/9.jpg"></li> 161 <li><img src="../Img/1.jpg"></li> 162 <li><img src="../Img/2.jpg"></li> 163 <li><img src="../Img/3.jpg"></li> 164 </ul> 165 </div> 166 </div> 167 </body> 168 </html>