[CSS] 마음대로 움직이게 만들어주는 2D transform 속성

개념

transform은 간단하게 말해서 css를 이용해 요소의 위치, 크기 등을 자유롭게 바꿔주는 기능을 수행한다.

이 글에서는 특정 요소의 위치, 크기, 회전, 기울임을 바꿔주는 transform 속성을 다뤄볼 예정이다.

 

유형

translate

translate은 좌우로 이동시키는 기능이다. translate(x축 이동거리, y축 이동거리)로 쓰이며, 각각 translateX(), translateY()로도 쓰인다. 값으로 음수를 쓰면 X축 기준 왼쪽으로 이동되며, Y축 기준 아래쪽으로 이동된다. 우리가 수학 시간에 배운 그래프의 좌표 값과 똑같다고 생각하면 된다. 뿐만 아니라, 이동 거리를 픽셀 값과 퍼센트 값 모두 줄 수 있다는 것도 특징이다.

 

rotate

rotate는 좌우로 회전시키는 기능이다. rotate(각도)로 쓰이며, 각도를 뜻하는 deg를 사용한다.

예를 들어, rotate(50deg)이면 시계 방향으로 50도 움직이라는 뜻이고, rotate(-50deg)이면 반시계 방향으로 50도 움직이라는 뜻이다. 즉 양수는 시계 방향, 음수는 반시계 방향을 의미한다.

 

scale

scale은 요소의 크기를 특정 배율만큼 늘리고 줄이는 기능이다.

scale(가로 크기, 세로 크기)로 쓰이며 값으로는 픽셀이 아닌 배율 값을 넣는데, 1을 원래 크기라고 두면 2는 원래 크기의 2배.. 이런 식인 것이다. scale(2, 3)이라면 가로(X축) 길이는 원래 크기의 2배로 늘리고 세로(Y축) 길이는 원래 크기의 3배로 늘리라는 뜻이다.

 

배율 값으로 0은 계속 줄어들어서 아예 없어진 상태를 뜻한다. 크기를 줄이기 위해서는 0과 1 사이의 값으로 주면 된다. scale(0.5)라면 원래 크기의 1/2 크기로 줄어든다는 뜻이다.

 

 skew

skew는 X축과 Y축을 기준으로 특정 각도만큼 기울이는 기능이다.

skewX(20deg)이면, X축 방향으로 20도만큼 기울이라는 뜻이 되고 skewY(20deg)이면 Y축 방향으로 20도만큼 기울이라는 뜻이 된다.