본문 바로가기
왕초보10분 JQUERY

transform matrix

by 세미짱 2017. 1. 18.
728x90
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



댓글