效果图
： ：
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> #box {width: 200px ؛ الارتفاع: 200 بكسل ؛ الهامش: 200 بكسل Auto ؛ الخلفية: #CCC ؛ الموقف: قريب التحويل: المنظور (800px) rotatey (-60deg) rotatex (45deg) ؛ النمط التحويل: Preserve-3d ؛} #box div {width: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ حجم الخلفية: تغطية ؛ -webkit-box-shadow: 0 0 100px #5fbcff ؛ opitated: 0.8 ؛} .front {transform: translatez (100px) ؛ الخلفية:#f00 ؛} .back {transform: translatez (-100px) ؛ الخلفية:#20ab4f ؛} .top {transform: translatey (-100px) rotatex (90deg) ؛ الخلفية: #ff7800 ؛} .bottom {transform: translatey (100px) rotatex (-90deg) ؛ الخلفية: #00f6ff ؛} .Left {transform: 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 || event ؛ var disx = ev.clientx-y ؛ var disy = ev.clienty-x ؛ document.onmousemove = function (ev) {var ev = ev || event ؛ 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"> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </viv> </div> </body> </html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 ， 感兴趣的朋友们自己运行看看效果 ， 希望这篇文章对大家能有一定的帮助。