햄버거메뉴 변형

리니지M 웹사이트에서 햄버거버튼이 마우스를 가져다대면 화살표로 변하는게 맘에들었다.
gif로 만들어서 넣으면 편하겠지만 svg로 만들어봤다

path로 필요한 선을 그려준 뒤 각각에 class를 줘서 스타일을 적용했다.
회전할 중심점을 잡아주고 화살표의 머리부분은 길이를 줄여주었다.

만들면서 가끔 보이던 한바퀴 빙글 도는 취소버튼도 만들었다.

마우스를 올리면(hover) transition이 실행되게 하고싶은데
각각 따로따로 움직이는 상황이 있었다. (마우스를 올린 막대기만 움직임)

.hambugi 클래스를 가진 요소에 마우스가 올라갔을 때, 그 요소의 자손인 .path1 클래스를 가진 요소에 스타일을 적용하는 방법으로 자손요소가 한번에 재생되도록 바꿨다.