css의 transform과 transform-origin 활용하기

형태를 변화시킬 때 사용하는 속성은?

css에서 형태를 변화시킬 때 사용하는 속성은 제목에서도 알 수 있듯이 transform입니다. 보통 rotate를 자주 사용하는데 이 뿐만 아니라 확대하는 scale과, 기울이는 skew 도 있습니다. rotate 말고는 거의 사용할 일이 없는 속성이죠. 가장 많이 사용하는 실용적인 예를 들어본다면 홈페이지에서 햄버거 아이콘을 만들 때 라던가 화살표를 돌릴 때 사용합니다.

햄버거 아이콘 만들어 보기

백스페이스와 엔터사이에 \가있는데 컨트롤을 누른 채 이것을 누르면 가느다란 선이 나옵니다.

span 태그 사이에 넣은 값은 이 값을 3개 넣은 것입니다. 그리고 이 엘리먼트를 90도로 돌리면 홈페이지 어디에서나 사용하는 햄버거 아이콘을 만들 수 있습니다.

transform-origin은 어떨 때 사용할까?

transform 효과가 선언되었을 때 transform-origin효과도 사용할 수 있습니다. 이는 형태를 변경시키는 기준점을 변경할 때 사용하는 값이기 때문이죠.

transform-origin 위치

회색 바탕은 엘리먼트고 파란색 기둥들은 우리가 만든 햄버거 아이콘이라고 생각해보세요. 우리가 rotate를 사용했을 때 무슨 점을 기준으로 엘리먼트를 돌렸을까요? 바로 가운데 (center, center) 입니다. transform-origin은 이 기준점을 다른 위치로 옮길 수 있습니다. 

값으로 %를 대신 쓸 수 있습니다. 좀 더 세분화해서 사용하고 싶다면 %를 사용하면 됩니다.