반응형 transform-origin1 [HTML/CSS] transform-origin & rotate를 사용하자 : 변신하는 아이콘 만들기 feat. position 오늘은 간단하게 반응하는 화살표 아이콘을 만들어 보자. 오늘 만들 아이콘은 transform-origin 속성과 transform 속성의 rotate 값을 이용하여 회전하는 아이콘을 만들어 볼 것이다. 해당 아이콘이 사용된 모습이 보고 싶다면, 하단의 링크를 참고해 보기 바란다. 우선 완성된 이미지를 살펴보자 위의 이미지에 보이듯이 평상시에는 '≡' 모양을 유지하다가 hover 기능에 의해 마우스를 인식하게 되면 아이콘의 각 막대가 회전하며 '↓' 모양으로 변화하는 것을 볼 수 있다. 아래의 링크에서는 측면에서 나타나는 사이드바 메뉴의 모션 맞추어 반응하는 아이콘이 사용되었다. [HTML/CSS] 사이드바 메뉴 만들기 : 나타나는 2차 메뉴 만들기 feat. transform: translate [HTM.. 2023. 5. 18. 이전 1 다음 반응형
