[CSS] transform 정리

Transform 속성은?

MDN을 찾아보니 transform을 다음과 같이 설명하고 있다.

'transform은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다.'

 

일반적인 문서 흐름을 방해하지 않는다는게 무슨 말일까 ...

이건 직접 테스트해보면 알 수 있다.

 

 

위에 사진은 transform을 이용해서 B를 확대시키고 살짝 기울인 모습인데

B가 커질 때 양 옆에 있는 박스들을 밀어내거나 위에 글에 영향을 주지 않고있다.

이렇게 다른 곳에 영향을 주지 않고 혼자만 스윽~ 변한다.

 

transform에 부여할 수 있는 속성이 여러개가 있고 그 중에는 2D 속성과 3D 속성이 있다.

오늘은 2D 효과와 관련된 부분만 정리하고 3D는 나중에 다시 포스팅 할거다.

 

 

transform 속성들 

* 속성뒤에 X가 있으면 x축 Y가 있으면 Y축으로 변형시킨다는 의미입니다!

translate(x, y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동
translateX(n)	요소의 위치를 X축으로 n 만큼 이동
translateY(n)	요소의 위치를 Y축으로 n 만큼 이동
scale(x, y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소
scaleX(n)	요소의 크기를 X축으로 n배 확대 또는 축소
scaleY(n)	요소의 크기를 Y축으로 n배 확대 또는 축소
skew(x deg, y deg)	요소를 X축으로 x˚ 만큼 Y축으로 y˚만큼 기울임
skewX(n deg)	요소를 X축으로 n˚ 만큼 기울임
skewY(n deg)	요소를 Y축으로 n˚ 만큼 기울임
rotate(n deg)	요소를 n˚ 만큼 회전

 

translate

 

translateX를 A에 적용한 모습인데 이렇게 되면 A가 X축으로 입력해준 값 만큼 이동하게 된다.

transform: translateX(30px);

translateY

transform: translateY(30px);

 

이제 대략적으로 어떤 느낌인지 감이 온다.

 

 

Scale

(기본 상태 (scale을 적용하기 전)

 

아래 사진은 각각 scaleX와 scaleY

transform: scaleX(2);

 

transform: scaleY(2);

 

skew

사진은 코드 순서대로

transform: skew(0);
transform: skewX(30deg);
transform: skewY(30deg);
transform: skewX(30deg, 30deg);

 

 

마지막으로 rotate

transform: rotate(30deg);