效果图
实例代码如下
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> javascript 六边形 3d 拖拽翻转效果 <//title> </title </title </title </title </title </title </title </title </title #Box {Width: 200px; Height: 200px; margem: 200px Auto; Antecedentes: #ccc; Posição: relativa; Transform: perspectiva (800px) giration (-60deg) giratex (45deg); estilo de transformação: preserve-3d;} #Box div {width: 100%; altura: 100%; Posição: Absoluto; topo: 0; esquerda: 0; Antecedentes-size: capa; -webkit-box-shadow: 0 0 100px #5fbcff; opacidade: 0.8;} .front {transform: translatez (100px); Antecedentes:#f00;} .back {transform: translatez (-100px); Antecedentes:#20AB4F;} .top {transform: translatey (-100px) giratex (90deg); Antecedentes: #ff7800;} .bottom {transform: translatey (100px) giratex (-90deg); Antecedentes: #00f6ff;} .left {transform: transllatex (-100px) giratey (90deg); Antecedentes: #0084ff;} .right {transform: transllatex (100px) giratey (-90deg); Antecedentes: #B400FF;} </SYLEY> <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) giratex ('+x+'deg) giratey ('+y+'deg)'; } document.onmouseup = function () {document.onMouseUp = null; document.onMousEmove = null; odiv.releaseCapture && odiv.releaseCapture (); } odiv.setcapture && odiv.setcapture () return false; }} </script> </adhead> <body> <div id = "box"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </body </ty html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 ， 感兴趣的朋友们自己运行看看效果 ， 希望这篇文章对大家能有一定的帮助。