效果图
实例代码如下 ：
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/<titels> Javascript 六边形 3d 拖拽翻转效果 </title> </head> </head> </</head> </</head> </</head> </</head> </</head> <dysthores #box {width: 200px; Höhe: 200px; Margin: 200px Auto; Hintergrund: #CCC; Position: Relativ; Transformation: Perspektive (800px) rotatey (-60de) rotatex (45deg); Transform-Stil: Preserve-3d;} #Box Div {Breite: 100%; Höhe: 100%; Position: absolut; oben: 0; links: 0; Hintergrundgröße: Cover; -Webkit-Box-Shadow: 0 0 100px #5fbcff; Opazität: 0.8;} .front {transform: translatez (100px); Hintergrund:#f00;} .back {transform: translatez (-100px); Hintergrund:#20ab4f;} .top {transform: Translatey (-100px) rotatex (90 °); Hintergrund: #ff7800;} .bottom {transform: translatey (100px) rotatex (-90deg); Hintergrund: #00F6ff;} .left {transform: Translatex (-100px) rotatey (90 °); Hintergrund: #0084ff;} .Right {transform: Translatex (100px) rotatey (-90deg); Hintergrund: #b400ff;} </style> <script> Fenster.onload = function () {var odiv = document.querySelector (" #Box"); var y = -60; var x = 45; odiv.onmouseDown = function (ev) {var ev = ev || Ereignis; var disx = ev.clientX-y; var disy = ev.clienty-x; document.onmousemove = function (ev) {var ev = ev || Ereignis; y = ev.clienty-disy; x = ev.clientx-disx; odiv.style.transform = 'Perspektive (800px) rotatex ('+x+'deg) rotatey ('+y+'deg)'; } document.onmouseUp = function () {document.onmouseUp = null; document.onmousemove = null; odiv.releascapture && odiv.releascapture (); } odiv.setcapture && odiv.setcapture () return false; }} </script> </head> <body> <div id = "box"> <div> </div> </div> <div> </div> <div> </div> </div> <div> </div> </div> </body> </html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 ， 感兴趣的朋友们自己运行看看效果 ， 希望这篇文章对大家能有一定的帮助。 希望这篇文章对大家能有一定的帮助。