햄버거 메뉴 트랜스폼 (Hamburger to Cross)
모바일 웹에서 흔히 볼 수 있는 ☰ 모양의 햄버거 메뉴 아이콘이 클릭 시 부드럽게 X 모양으로 변하는 애니메이션입니다. 각 선의
transform: translateY(이동)와 rotate(회전)를 절묘하게 조합하며, 위에서 배운 체크박스 해킹 기법을 결합하면 완벽한 순수 CSS 메뉴 버튼이 탄생합니다.<div class="burger-wrapper">
<input type="checkbox" id="burgerToggle" class="burger-checkbox">
<label for="burgerToggle" class="burger-icon">
<span></span>
<span></span>
<span></span>
</label>
</div>