transform matrix

transform matrix

출처

: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

: 이미지는 모두 위 페이지를 캡쳐한 것입니다.

- Why Should I Care?

: 다른 transform 함수를 조합해서 사용하는 것 보다 간결하다.

: 픽셀 단위까지 정확히 원하는 형태로 변형할 수 있다.

: object(element)의 변형 정보를 알려주는 javascript 함수, getComputedStyle()은 matrix() 함수를 결과로 반환한다.

: 출처 페이지에서 getComputedStyle(document.getElementById("exampleRotation")) 를 실행한 결과 중 transform에 관한 부분.

- What Does the Markup Look Like?

: 6개의 파라매터를 가지고 있다. firefox 만 마지막 두 파라매터에 "px"를 사용한다.

- Matrix

: CSS3 2D Transform 에서는 3x3 행렬만 사용하며 의미는 아래와 같다.

: 행렬 우 하단 값은 항상 1 이다. matrix 함수의 첫 번째 인자와 같은 것이 아니다.

: matrix 함수의 파라매터로 만들어진 행렬은 object의 각 모서리 좌표(벡터)와 곱해져서 옮겨질 위치가 결정된다.

: 예를 들어 벡터 (2, 3)에 대한 matrix(4, 5, 6, 7, 8, 9) transform은 아래 식으로 계산된다.

- Meaning of Numbers

: 행렬의 곱을 이용해서 변형을 조합할 수 있다. 

: 예를 들어 scale과 translate 를 하는 행렬을 만들려면 

  위 표에서 scale(a)하단 행렬과 translate 하단 행렬을 곱한 행렬을 사용하면된다.

- 기타 참고

: http://www.answers.com/topic/transformation-matrix