Transformable Menu Button

button hover시

---

HTML

<h2>Transformable Menu button</h2>
    <div class="container">
        <div class="item top"></div>
        <div class="item bottom"></div>
    </div>

CSS

<style>
        .container {
            display: flex;
            width: 50px;
            height: 25px;
            flex-direction: column;
            justify-content: space-between;
        }
        .item {
            width: inherit;
            height: 5px;
            background-color: #000;
            transition: transform 0.2s;
        }
        .container:hover .top {
            transform: translateY(10px) rotate(45deg);
        }
        .container:hover .bottom {
            transform: translateY(-10px) rotate(-45deg);
        }
    </style>

---

translate()

-> 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경한다.

1. 단일 (length-precentage) 값

transform: translate(200px);
transform: translate(50%);

• 변환하는 벡터의 가로축(수평, x축)을 나타내는 length or percentage

• 변환하는 벡터의 세로축(수직, y축)은 0으로 설정됨

  ex) translate(2px) = translate(2px, 0)

2. 이중 (length-precentage) 값

transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

• 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두개의 length or percentage 를 설명