rotate3d
-
[ JS ] rotate3d 값 얻기Javascript/이론 2023. 2. 8. 13:55
JS를 통해 요소의 rotate3d 프로퍼티를 얻기 위해서 만든 클래스입니다. 1. Constructor constructor에서는 transform property를 얻고자 하는 요소를 parameter로 두었습니다. 따라서 클래스 성성시 요소를 받아 요소의 matrix3d 데이터를 저장합니다. class Transform { constructor(ele) { this.ele = ele; this.matrix3d = window .getComputedStyle(ele) .getPropertyValue("transform") // column priority .split("(")[1] .split(")")[0] .split(",") .map((ele) => Number(ele)); } } 2. Metho..
-
[Computer Graphics] 3D 변환 행렬과 행렬 분해Computer Graphic 2023. 1. 31. 17:27
1. 3D 변환 행렬의 구성 3D 공간에서의 변환은 보통 4x4 매트릭스를 통해 이루어집니다.(homogenous coordinate라고 표현하며 하나의 행렬을 통해 여러 종류의 연산을 나타낼 수 있다는 장점을 가집니다.) OpenGL에서는 아래 이미지와 같이 4x4 매트릭스를 이차원 배열이 아닌 16개의 원소를 갖는 1차원 배열을 통해 구현하며, column-primary layout을 취합니다. 즉, 배열의 첫번째 네 원소가 매트릭스의 첫번째 열(A00 - A03)에 대응됩니다. 3d 변환 행렬은 네 개의 열벡터로 이루어지며,. 앞 부분의 세 열벡터는 rotation과 scale에 대한 정보를, 마지막 열벡터는 translation에 대한 정보를 담고 있습니다. 매트릭스는 각 변환에 대한 정보를 담고..
-
[ CSS ] transform과 좌표계HTML & CSS/이론 2023. 1. 9. 22:45
뷰포트와 좌표계 모든 뷰표트는 좌표계라 할 수 있으며 좌측 상단을 원점으로 합니다. 아래의 그림은 좌표계를 시각화해서 나타낸 것인데 약간의 실수가 있으니 각 축이 가지는 이동 및 회전의 방향만 확인하시기 바랍니다. transform 적용에 따른 좌표계 이동 css를 사용해 각 요소에 transform을 적용한다면 각 요소는 로컬 좌표계를 생성하고 원점을 각 요소의 50%, 50% 지점으로 정의합니다. 이러한 로컬 좌표계의 원점은 transform-origin 속성을 통해 조작가능합니다. css에서의 변형은 기본적으로 transform matrix와의 연산을 통해 이루어집니다. matrix의 연산에서 교환법칙은 성립되지 않으므로 각 transform의 적용 순서에 주의해야합니다. 아래 그림에서와 같이 ro..