css transform matrix

[CSS] transform matrix

transform의 값들인 translate(이동), skew(기울기), rotate(회전), scale(확대)를

transform: matrix(1, 0, 0, 1, 0, 0) 또는 행렬로 표시하는 것을 말합니다.

** transform matrix 를 쓸 경우 transform 함수들보다 간결하게 사용이 가능합니다!

​

transform: translate(0,0); transform-origin: top right bottom right center; transform: skew(45deg); transform: rotate(45deg); transform: scale(1); transform: matrix(1,0,0,1,0,0)

​

[ transfrom 행렬 형태 ]

transform: matrix(a,b,c,d,e,f);

a	c	e
b	d	f
0	0	1

​

[ transfrom 행렬에 적용되는 값 ]

a	b	c	d	e	f
scaleX	tan(skewY)	tan(skewX)	scaleY	translateX	translateY

​

[ transform matrix 설정값 예시 ]

 

transform matrix 사용 예시값 https://brunch.co.kr/@99-life/4

​

이 transform 의 여러 값들 중에서 rotate이

특이하게도 a, b, c, d 를 이용하고 있습니다.

사용법은 아래와 같습니다.

​

a = con(), b = sin(), c = -sin(), d = con()

​

더욱 정확한 표현을 확인해보고자 예시를 들면서 말할 수 있는데,

아래처럼 쓰일 수 있습니다.

​

transform: scale(2,2); transform: matrix(2,0,0,2,0,0); transform: skew(30deg, 40deg); transform: matrix(1,tan40,tan30,1,0,0); transform: translate(40px, 50px) transform: matrix(1, 0, 0, 1, 40, 50); transform: rotate(45deg); transform: matrix(con45, sin45, -sin45, con45, 0, 0);

​

그렇지만, transform에 단축 속성이 있듯,

matrix 에서도 역시 두개 이상의 값을 동시에 표현 가능합니다.

​

이를테면, scale(3,2) 와 rotate(45deg) 값을 함께 주고자 할때,

matrix(3con45, 2sin45, -3sin45, 2con45, 0, 0) 로 표현할 수 있는 것입니다.

 

transform: scale(3,2) rotate(45deg) transform: matrix(3con45, 2sin45, -3sin45, 2con45, 0, 0)

​

하지만 b와 c값이 생각한 것과 다르게 나오죠?

그 이유는 행렬의 곱을 통해 나온 결과값이기 때문입니다.

scale(3,2), rotate(45deg) 를 행렬의 곱으로 표현하면,

​

3	0	0	*	con45	-sin45	0
0	2	0		sin45	con45	0
0	0	1		0	0	1

3con45	-3sin45	0
2sin45	2con45	0
0	0	1

​

하지만 행렬에서 가장 중요한 부분은

행렬의 곱은 순서가 바뀌면 값도 바뀌게 된다는 사실!

그러므로 순서값이 매우 중요합니다.

​

그래서 rotate(45deg), scale(3,2) 의 순서를 바꿔 행렬의 곱을 시행한다면

다음과 같은 값이 나오죠.

​

3con45	-2sin45	0
3sin45	2con45	0
0	0	1

​

이처럼 b와 c의 값이 2sin45, -3sin45 에서 3sin45, -2sin45로 바뀐 것을 볼 수 있습니다.

​

---

​

Transform matrix 는 일반 transform 보다 간결하게 사용되지만

한눈에 어떠한 transform의 함수값이 사용되었는지 보기에는 불편합니다.

그럼에도 transform matrix 를 사용하는 이유는

​

1. javascript 를 이용하여 item 에 transform 요소를 적용하기 편리하며,

2. 적용된 transform 값을 추출하기도 좋으며,

3. trasnfrom matrix 를 이용한 3d구현이 편리합니다.

​

하지만 계산식이 번거로우며, 적용하기 쉬운 요소가 아니기 때문에 많은 분들이

활용을 하시진 않지만, 이러한 요소도 있다는 것을 아신다면,

추후 본인의 스킬업이 되지 않을까 싶습니다.

 

matrix(scaleX, skewX, skewY, scaleY, translateX, translateY)

 

참조 링크

m.blog.naver.com/bugman002/221314890537

[CSS] transform matrix

brunch.co.kr/@99-life/4

CSS Transform 속성