效果图
实例代码如下 ：
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> javascript 六边形 3d 拖拽翻转效果 </head> <stryst> #box {너비 : 200px; 높이 : 200px; 마진 : 200px Auto; 배경 : #CCC; 위치 : 상대; 변환 : PRESPECTION (800PX) ROTATEY (-60DEG) ROTATEX (45DEG); 변환 스타일 : preserve-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> <cript> 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 || 이벤트; y = ev.clienty-disy; x = ev.clientx-disx; odiv.style.transform = 'perspective (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> </body> </html>以上就是这篇文章的全部内容 以上就是这篇文章的全部内容, 怎么样？效果很好吧 怎么样？效果很好吧, 感兴趣的朋友们自己运行看看效果, 希望这篇文章对大家能有一定的帮助。