效果图
实例代码如下：
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> <title> javascript #Box {Width: 200px; ความสูง: 200px; มาร์จิ้น: 200px auto; ความเป็นมา: #CCC; ตำแหน่ง: ญาติ; แปลง: มุมมอง (800px) rotatey (-60deg) rotatex (45deg); รูปแบบการแปลง: Preserve-3d;} #box div {ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ขนาดพื้นหลัง: cover; -webkit-box-shadow: 0 0 100px #5fbcff; ความทึบ: 0.8;} .front {transform: translatez (100px); พื้นหลัง:#f00;} .back {transform: translatez (-100px); พื้นหลัง:#20AB4F;} .TOP {แปลง: Translatey (-100px) Rotatex (90Deg); ความเป็นมา: #ff7800;} .Bottom {transform: translatey (100px) rotatex (-90deg); พื้นหลัง: #00f6ff;} .left {แปลง: translatex (-100px) rotatey (90deg); พื้นหลัง: #0084ff;}. right {transform: translatex (100px) rotatey (-90deg); พื้นหลัง: #b400ff;} </style> <script> window.onload = function () {var odiv = document.QuerySelector (" #box"); var y = -60; var x = 45; odiv.onmousedown = function (ev) {var ev = ev || เหตุการณ์; var disx = ev.clientx-y; var disy = ev.clienty-x; document.onmousemove = function (ev) {var ev = ev || เหตุการณ์; y = ev.clienty-disy; x = ev.clientx-disx; odiv.style.transform = 'มุมมอง (800px) rotatex ('+x+'deg) rotatey ('+y+'deg)'; } document.onmouseup = function () {document.onmouseup = null; document.onmousemove = null; odiv.releasecapture && odiv.releasecapture (); } odiv.setCapture && odiv.setCapture () return false; }} </script> </head> <body> <div id = "box"> <div> </div> <div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </body> </html>以上就是这篇文章的全部内容， 怎么样？效果很好吧， 感兴趣的朋友们自己运行看看效果， 希望这篇文章对大家能有一定的帮助。