效果图
：
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tyle> javascript 六边形 3d 拖拽翻转效果 </tape> </-head> <style> #box {largeur: 200px; hauteur: 200px; marge: 200px auto; Contexte: #ccc; Position: relative; Transform: Perspective (800px) Rotatey (-60Deg) Rotatex (45Deg); style transform: Preserve-3d;} #box div {largeur: 100%; hauteur: 100%; Position: absolu; en haut: 0; gauche: 0; Backgrack-Size: Cover; -webkit-box-shadow: 0 0 100px # 5FBCFF; Opacité: 0,8;} .front {Transform: Translatez (100px); Contexte: # f00;} .back {transform: tradlatez (-100px); Contexte: # 20ab4f;} .top {transform: tradlatey (-100px) rotatex (90Deg); Contexte: # ff7800;} .bottom {transform: tradlatey (100px) rotatex (-90deg); Contexte: # 00f6ff;} .left {transform: tradlatex (-100px) rotatey (90Deg); Contexte: # 0084ff;} .Right {transform: tradlatex (100px) rotatey (-90deg); Contexte: # 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 = fonction (ev) {var ev = ev || event; y = ev.clienty-disy; x = ev.clientx-disx; odiv.style.transform = 'perspective (800px) rotatex (' + x + 'deg) rotatey (' + y + 'deg)'; } document.onMouseUp = function () {document.onMouseUp = null; document.onMouseMove = null; odiv.releSeaCapture && odiv.releasecapture (); } odiv.setCapture && odiv.setcapture () return false; }} </ script> </ head> <body> <div id = "box"> <div> </ div> <div> </div> <div> </div> <div> </div> <v> </div> <div> </div> </div> </odody> </html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 ， 感兴趣的朋友们自己运行看看效果 ， 希望这篇文章对大家能有一定的帮助。