HTML/CSS 메뉴 애니메이션 transform: translateX 활용했음

transform에도 참 종류가 많은데
가로 축을 움직여주는 translateX를 사용해서 만들어봤다
글씨가 기울어지는건 소소하게 skew라는 속성도 같이 넣었기 때문
저런 모양새를 웹에서 많이 보지 않았는가? 유용해 보인다
코드를 봅시다

    <div class="container">
        <div><h3>MENU</h3></div>
        <ul class="li-con">
            <li class="li-item">
                menu1
            </li>
            <li class="li-item">
                menu2
            </li>
            <li class="li-item">
                menu3
            </li>
            <li class="li-item">
                menu4
            </li>
        </ul>
    </div>

body{
    margin: 0;
    padding: 0;
}

.container{
    padding: 30px;
    width: 20vw;
    transform:translateX(-170px);
    height: 100vw;
    color: white;
    background-color: black;
    text-align: right;
}
.li-item{
    list-style: none;
    transform: translateX(-150px);
    padding: 15px;

}
.container:hover{
    transform: translateX(-10px);
    transition: 1s;
    text-align: center;
}


.container:hover .li-item{
    animation-name: menu-ani;
    animation-duration: 1s;
    animation-fill-mode: forwards;

}

@keyframes menu-ani{
    0%{
        transform: translateX(-100px);
    }
    50%{
        transform: translateX(70px) skew(-30deg, 0deg);
    }
    100%{
        transform: translateX(-20px) skew(0deg, 0deg);
    }
}

사실 자바스크립트 공부를 하다가 퍼블리싱 과정에 남은 진도가 있어서 잠시 들렀다
HTML코드를 보자면 간단한 메뉴박스 안에 ul리스트 안에 li항목을 4개 넣어주었고
레이아웃을 짤때 항상 큰 박스로 그 요소들을 감싸주는데 나중에 구분하기도 편하고 위치잡기도 편했기 때문이다 HTML은 크게 볼 게 없고

CSS를 보자 잡다한 마진 패딩 등등은 위치를 잡아주는 용도로 노가다 좀 했고
중요한건 keyframes로 애니메이션이 동작하는 동안 퍼센테이지 마다마다 어떤 작동을 시킬지 정해주는 것이다
translateX는 X좌표를 지정해주는 것으로 쉽게 말해 좌우 이동이다
Y는 위아래겠지용?
skew는 글씨를 기울여주는건데 각도를 한번 지정해주면 이해가 편할 것이다
나도 하나하나 적용해보며 원하는 모양을 찾았다

혹시 이걸 보며 궁금한게 있다면 댓글 달아주세요 직통해서 설명해드립니다
아 맞아 keyframes로 만든 애니메이션 함수는 animation-name 으로 호출이 가능하고
duration 1s는 애니메이션이 동작하는 시간 fill-mode: forwards는 마우스를 올리는 동안(hover로 애니메이션을 동작 시켰기 때문에) 종료가 되지 않도록 해주는 코드이다

컴퓨터 렉이 너무 심해서 글쓰기 힘들다.. 안넝