CSS Transform 알아보기(1) - 기본개념

CSS Transform 개념 알아보기

웹 페이지를 보다보면 마우스를 올리거나, 클릭하거나, 스크롤을 움직이다 보면 페이지 내 요소들이 스르륵~ 샤라락~ 휘리릭~ 하는 모습들을 볼 수 있다. 그런 효과들의 대다수에는 transform 속성이 숨어있다.(모든 것이 그렇지는 않지만... transform + transition를 활용한다.)

 

그렇다면 오늘 CSS의 속성 중 하나인 Transform에 대해 알아보자.

 

Transform은 말 그대로 변환이다. 우리는 특정 도형(엘리먼트)를 원하는 모양으로 변형시키기 이 transform을 사용한다.

 

이 transform을 통해 위와 같은 직사각형 도형의 위치를 이동시키거나, 회전시키거나, 비틀거나, 원근법 등 다양한 효과를 줄 수 있다.

 

transform은 크게 matrix. translate, scale, rotate, skew, perspective의 속성들을 사용할 수 있으며, 2D와 3D에 대해서 적용할 수 있다.

transform에서 사용할 수 있는 속성들은 아래 표와 같다. 자세한 내용은 여기서 볼 수 있다.

 

오늘은 transform을 통해 어떤 것들을 할 수 있는지 알아보았고, 앞으로는 위에서 설명한 속성들에 대해 직접 예제들을 통해 하나씩 자세하게 알아볼 예정이다.

그 이후에는 transition과 함께 사용해서 어떻게 효과를 주는지도 알아볼 예정이다.