css 3d transform 기능을 사용하는데 rotate의 축이 뒤죽박죽인 것 같습니다.

Question

css 3d transform 기능을 활용해서 3X3 큐브를 만들어볼까 시도하다가이미지들의 rotate 축이 이상합니다.rotate 축이 고정된 것이 아니라 유동적인 것은 알고 있지만 그것을 감안하더라도 rotate 축을 예상하기가 어렵습니다. 문제가 무엇인지 아시는 분.. 조언 부탁드립니다. transform : rotateX(0deg) rotateY(90deg) rotateZ(0deg) 에서transform : rotateX(90deg) rotateY (90deg) rotateZ(odeg)으로 transition하려 하는데 문제가 일어나네요..보통 3d의 img 부품들의 transform 값은 고정해놓고 사용하던데한번 transform 값을 바꿔가면서 만들어볼까하다 막혔네용.. 도움을 구합니다! let x = new Array(54); let y = new Array(54); let z = new Array(54); let degX = new Array(54); let degY = new Array(54); let degZ = new Array(54); for(let j=0; j<54; j++){ x[j]=0; y[j]=0; z[j]=0; degX[j]=0; degY[j]=0; degZ[j]=0; z[j]=60; if(j<9){ ; //front(0~8) } else if(j<18){ degX[j]=90; //top(9~17) } else if(j<27){ degX[j]=180; //back(18~26) } else if(j<36){ degX[j]=270; //bottom(27~35) } else if(j<45){ degY[j]-=90; //left(36~44) } else{ degY[j]+=90; //right(45~53) } if(j%3==0){ x[j]=-40; } else if(j%3==1){ ; } else{ x[j]=40; } if(j%9<3 && j%9>=0){ y[j]=40; } else if(j%9<6 && j%9>=3){ y[j]=0; } else{ y[j]=-40; } } let imgTag = new Array(54); for(let j=0; j<54; j++){ imgTag[j] = document.createElement('img'); imgTag[j].style.backgroundColor='216cd9'; imgTag[j].style.transform='rotateX('+degX[j]+'deg) rotateY('+degY[j]+'deg) rotateZ('+degZ[j]+'deg) translate3d('+x[j]+'px, '+y[j]+'px, '+z[j]+'px)'; document.querySelector('.cube').appendChild(imgTag[j]); }; let mov = function(i){ imgTag[i].style.transform='rotateX('+degX[i]+'deg) rotateY('+degY[i]+'deg) rotateZ('+degZ[i]+'deg) translate3d('+x[i]+'px, '+y[i]+'px, '+z[i]+'px)' } /* let mov1 = function(i){ imgTag[i].style.transform='rotateY('+degY[i]+'deg) rotateZ('+degZ[i]+'deg) translate3d('+x[i]+'px, '+y[i]+'px, '+z[i]+'px)' } */ setInterval(()=>{ for(let i=0; i<54; i++){ if(i<9) degZ[i]+=90; if(i>8 && i<12) degY[i]+=90; if(i>32 && i<36) degY[i]-=90; if(i==38 || i==41 || i==44) degX[i]+=90; // <- degX와 degZ의 축이 같음 if(i==45 || i==48 || i==51) degX[i]-=90; // <- mov(i) } }, 1000) *{ margin : 0; padding : 0; box-sizing : border-box; } body { display : flex; justify-content : center; align-items : center; background-size : cover; background-position : center center; background-image : url("https://cdn.pixabay.com/photo/2021/08/19/02/41/background-6556849_1280.jpg"); background-repeat : no-repeat; width : 100vw; height : 100vh; } .container { perspective : 1000px; } .cube { position : absolute; transform-style : preserve-3d; transition : all 1s; transform : rotateX(-20deg) rotateY(20deg); transform-origin : center center; } .cube img { position : absolute; width : 40px; height : 40px; transition : all 1s; }

undefined_and_null · Answer

이거 gimbal lock 같은데요...

moonti · Answer

예상하기 어렵지만, 규칙은 분명 있습니다. 에전에 제가 작성한 글을 링크해봅니다. 도움이 되길 바랍니다. https://taem.notion.site/CSS-Animation-00c92fb12d0b43f0b0f223012e06e5c5

css 3d transform 기능을 사용하는데 rotate의 축이 뒤죽박죽인 것 같습니다.

2개의 답변

#transform 목록