기본 JS를 통해 이벤트, 마우스 프레스, 마우스 리프트 및 마우스 이동 이벤트를 클릭하면 3D 큐브의 드래그 및 회전이 실현되고 회전 각도는 실시간으로 반사되어 인터페이스에 표시됩니다.
구현 원리 : 화면을 클릭 할 때 마우스의 좌표와 움직일 때 마우스의 좌표를 얻으면 X 축 및 y 축에서 움직이는 마우스의 거리를 얻고 실시간으로 변환 속성에 거리를 할당 할 수 있습니다.
따라서 3D 큐브 회전의 효과는 변환을 변경함으로써 달성됩니다. 속성 값 회전.
HTML 코드 블록 :
<body> <입력 유형 = "버튼"value = "스프레드를 클릭하십시오"/> <입력 유형 = "text"value = "// x 축 회전 각도 <입력 유형 ="text "value =" "// y 축 회전 <입력 유형 = "text"/> <div> <div> <span> </span> <span> </span> <span> </span> </span> <span> </span> <span> </span> </div> </body>
CSS 코드 블록 :
<Style> body {cursor : url ( "img/openhand1.png"), auto;}. big_box {width : 500px; 높이 : 500px; 마진 : 200px Auto;}. Box {-webkit-transform 스타일; -moz-transform-style : -moz-3d; Preserve-3D; Transform-Origin : 100px 100px 00px; 위치 : 상대; 변환 : Rotatex (0DEG) Rotatey (0DEG) ROTATEZ (0DEG) SCALE3D (0.7,0.7,0.7);}. 상자 SPAN {전이 : 모든 1S 선형; Border-Box; Border : 1px Solid #999;/*불투명도 : 0.7;*/Text-Align : Center; 중심; 선-높이 : 200px; 글꼴 크기 : 60px; Font-Weight : 700; Border-Radius : 12%;}. 상자 스팬 : nth-Child (1) {Background-Color : Deepskyblue; Transform-Origin : LEFT; ROTATEY (-90DEG). Translatex (-100px); // 왼쪽}. 박스 범위 : nth-Child (2) {배경 색 : 빨간색; 변형-오리 핀 : 오른쪽; transform : rotatey (90deg) translatex (100px); // 오른쪽}. 박스 범위 : nth-Child (3) {background-color : green; transform-origin : top. ; // top} .box span : nth-Child (4) {배경색 : #6633ff; 변환-오리핀 : 바닥; 변환 : Rotatex (-90deg) Translatey (100px); // bottom} .box span : nth-child (5) {배경-색 : 금 : translatez (-100px); // back}. box}. #122B40; transform : translatez (100px); // front} .box : 호버 스팬 {불투명도 : 0.3;}. 상자 : 호버 {animation-play-state : paused; // set animation pause} </style>JS 코드 블록 :
<cript> move (); clickbox (); // 마우스를 누르고 움직일 때 무료, function move () {var body = docum xx = 0, yy = 0; var xarr = [], yarr = []; wind e.clienty/2; window.onmouseMove = function (e) {// 마우스 이동 event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance 회전 각도 ynum.value = yy+"°"; // 회전 각도를 transform box.style.transform = "rotatex ("+xx+"deg) rotatey ("+yy+"deg) rotatez (0deg) scale3d (0.7,0.7,0.7)에 표시합니다. e.clienty/2;}}; wind document.querySelector ( ". Open"); var box = document.querySelector ( ". box"); var son = box.children; var value = 0; // 큐브가 분산 될 때 변환 매개 변수 저장 var0 = [ "rotatey (-90deg) translatey (90deg) transex (100px)", "", " Translatey (-100px) ", <br>"rotatex (-90deg) translatey (100px) ","translatez (-100px) ","Translatez (100px) "; // 변환 매개 변수 저장 var art1 = ["rotatey (-90deg) translatex (-10date) (100px) "," ",", "rotatey (-90deg) translate (100px)" TranslateX (100px) Translatez (100px) ", <br>"Rotatex (90deg) Translatey (-100px) Translatez (100px) ","Rotatex (-90deg) Translatey (100px) Translatez (100px) ","Translatez (-200px) ","Translate (200px) " function () {if (value == 0) {value = 1; btn.value = "병합 클릭"; for (var i = 0; i <arr1.length; i ++) {i ++; j = 0;위의 것은 새로운 속성 변환 및 CSS3의 기본 J를 기반으로 3D 큐브 회전을 드래그하는 마우스에 대해 소개 된 관련 지식입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!