效果图
实例代码如下 ：
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <Title> javascript 六边形 3d </title> </hadf> #box {ширина: 200px; высота: 200px; маржа: 200px Auto; Фон: #CCC; позиция: относительно; Преобразование: перспектива (800px) rotatey (-60deg) rotatex (45Deg); Strain-Style: Preverve-3d;} #box div {ширина: 100%; высота: 100%; позиция: абсолют; верх: 0; слева: 0; размер фона: обложка; -Webkit-box-shadow: 0 0 100px #5fbcff; непрозрачность: 0,8;} .front {transform: translatez (100px); фон:#f00;} .back {transform: translatez (-100px); фон:#20AB4F;} .top {transform: translatey (-100px) rotatex (90deg); Фон: #ff7800;} .bottom {transform: translatey (100px) rotatex (-90deg); фон: #00f6ff;} .left {transform: translatex (-100px) rotatey (90deg); фон: #0084ff;} .right {transform: translatex (100px) rotatey (-90deg); фон: #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 = 'перспектива (800px) rotatex ('+x+'deg) rotatey ('+y+'deg)'; } document.onmouseup = function () {document.onmouseup = null; document.onmouseMove = null; ODIV.RELEASECAPTURE && ODIV.RELEASECAPTURE (); } odiv.setCapture && odiv.setCapture () вернуть false; }} </script> </head> <body> <div id = "box"> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> </body> </html>以上就是这篇文章的全部内容 ， 怎么样？效果很好吧 感兴趣的朋友们自己运行看看效果 ， 希望这篇文章对大家能有一定的帮助。