效果图

实例代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejavascript六边形三维(三维的缩写)拖拽翻转效果/title/head style # box { width :200 px；高度：200 px余量： 200像素汽车；背景# ccc相对位置：变换：透视(800 px)Rotatey(-60)Rotatex(45)；变换样式： preserve-3d；} # box div {宽度：100%；高度： 100%;绝对位置：top:0left:0背景尺寸：封面；-web套件-box-shadow :0 0 100 px # 5 FB CFF；opacity: 0.8 }。前{ transform : translateZ(100 px)；背景技术# f00}。back { transform : translateZ(-100 px)；背景技术# 20ab4f}。top { transform : translatey(-100 px)rotateX(90)；背景# ff7800}。底部{ transform : translatey(100 px)Rotatex(-90)；背景# 00f6ff}。左{ transform : translatex(-100 px)Rotatey(90)；背景技术# 0084ff}。右{ transform : translatex(100 px)Rotatey(-90)；背景： # b 400 ff}/样式脚本窗户。onload=function(){ var Odiv=document。query selector(' # box ')；var y=-60；var x=45odiv。onmousedown=function(ev){ var ev=ev | | event；var DIsX=ev。客户端x-y；var disY=ev。client y-x；文件。onmousemove=function(ev){ var ev=ev | | event；y=ev。client y-DIsy；x=ev。客户端x-DIsX；oDiv.style.transform='透视(800像素)Rotatex(' x '度)Rotatey(' y '度)'；}文档。onmouseup=function(){ document。onmouseup=nulldocument.onmousemove=nullodiv。释放捕获odiv。释放捕获()；} odiv。setcaptureodiv。setcapture()返回false } }/script/head body div id=' box ' div class=' front '/div class=' back '/div class=' top '/div class=' bottom '/div class=' left '/div class=' right '/div/div/body/html以上就是这篇文章的全部内容，怎么样？效果很好吧，感兴趣的朋友们自己运行看看效果，希望这篇文章对大家能有一定的帮助。