nbsp;html&gt; 2   3  4      <meta> 5      <title>ITandYT</title> 6      <style> 7          #box{ 8             width: 200px; 9              height: 200px;10             margin: 200px auto;11              position: relative;12 13             /*给父级设置3d空间*/14              transform-style: preserve-3d;15             /*设置景深*/16              /*perspective: 800px;*/17              transform: perspective(8000px) rotateY(-60deg) rotateX(30deg);18         }          #box div{21             width: 100%;22             height: 100%;23              border: 1px solid black;24             position: absolute;25              pacity: 0.7;26         }27         /*前面*/28          #box div:nth-child(1){29             background: palegreen;30              transform: translateZ(100px);31         }32         /*后面*/33          #box div:nth-child(2){34             background: palevioletred;35              transform: translateZ(-100px);36         }37         /*左面*/38          #box div:nth-child(3){39             background: plum;40             transform: translateX(-100px) rotateY(90deg);41         }42         /*右面*/43          #box div:nth-child(4){44             background: peru;45              transform: translateX(100px) rotateY(90deg);46         }47         /*上面*/48          #box div:nth-child(5){49             background: palegoldenrod;50              transform: translateY(-100px) rotateX(90deg);51         }52         /*下面*/53          #box div:nth-child(6){54             background: paleturquoise;55              transform: translateY(100px) rotateX(90deg);56         }57         img{58              width:200px;59             height: 100%;60         }61     </style>62 63 64 <div>65      <div><img  alt="带你了解css中的3D效果" ></div>66     <div><img  alt="带你了解css中的3D效果" > </div>67     <div><img  alt="带你了解css中的3D效果" > </div>68      <div><img  alt="带你了解css中的3D效果" > </div>69     <div><img  alt="带你了解css中的3D效果" > </div>70     <div><img  alt="带你了解css中的3D效果" > </div> </div>72 73 <script>74 75     // 获取元素76      var oDiv = document.querySelector(&#39;#box&#39;);77     var x = 30;78      var y = -60;79     oDiv.onmousedown = function(ev){80          var event = window.event || ev;81          var disY = event.clientX - y;82          var disX = event.clientY - x;83 84          document.onmousemove = function(ev){85              var event = window.event || ev;86              // 计算偏移角度87             x = event.clientY - disX;88              y = event.clientX - disY;89              oDiv.style.transform = &#39;perspective(800px) rotateY(&#39;+y+&#39;deg) rotateX(&#39;+x+&#39;deg)&#39;90         }91          document.onmouseup = function(){92              document.onmousemove = null;93         }94          return false;95     }96 97 </script>