CSS3 translateY() 메서드로 y축 방향 요소 변환하기

CSS3에서는 translateY(y) 메서드를 사용하여 요소를 y축(세로) 방향으로 이동시킬 수 있습니다. 이 메서드는 요소의 위치를 위아래로 조정할 때 유용하며, 기존 레이아웃에 영향을 주지 않고 시각적으로만 위치를 변경합니다.

translateY() 구문

translateY(y)

매개변수 설명

• y: 이동 벡터의 세로 좌표(ordinate)를 나타내는 길이 값입니다. px, em, rem, % 등 다양한 단위를 사용할 수 있으며, 양수 값은 아래쪽으로, 음수 값은 위쪽으로 요소를 이동시킵니다.

사용 예제

다음 예제는 검은색 사각형 요소를 y축 방향으로 20px 이동시키고 배경색을 주황색으로 변경하는 코드입니다.

div {
    width: 40px;
    height: 40px;
    background-color: black;
}
.trans {
    transform: translateY(20px);
    background-color: orange;
}

위 코드에서 .trans 클래스가 적용된 요소는 원래 위치에서 세로로 20px 아래로 이동하여 표시됩니다. translate 계열 메서드는 GPU 가속을 활용하므로 애니메이션 성능 측면에서도 효율적입니다.