效果图
实例代码如下 ：
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> javaScript 六边形 3d 拖拽翻转效果 </title> </head> <syle> #box {ancho: 200px; altura: 200px; margen: 200px automático; Antecedentes: #ccc; Posición: relativo; transformación: perspectiva (800px) rotatey (-60deg) rotatex (45deg); transform-estilo: preserve-3d;} #box div {ancho: 100%; altura: 100%; Posición: Absoluto; arriba: 0; izquierda: 0; tamaño de fondo: cover; -webkit-box-shadow: 0 0 100px #5fbcff; Opacidad: 0.8;} .Front {Transform: TranslateZ (100px); Antecedentes:#f00;} .back {transform: traducez (-100px); Antecedentes:#20Ab4f;} .top {transformación: traducey (-100px) rotatex (90deg); Antecedentes: #ff7800;} .bottom {transform: traducey (100px) rotatex (-90deg); Antecedentes: #00f6ff;} .left {transform: traduceX (-100px) rotatey (90deg); Antecedentes: #0084ff;} .Right {transform: traduceX (100px) Rotatey (-90deg); Antecedentes: #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 = 'perspectiva (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> </div> </body> </html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 感兴趣的朋友们自己运行看看效果 感兴趣的朋友们自己运行看看效果 希望这篇文章对大家能有一定的帮助。