CSS transform translate

문다현·2023년 10월 22일

translate은 HTML요소를 2차원 벡터의 특징에 따라 이동시킨다.
벡터의 좌표들이 해당 요소들이 어느 방향으로 얼마나 이동하는지 정의한다

일단 원점(0,0)은 좌측 상단이다.
그리고 오른쪽으로 갈 수록 x축값 증가, 아래로 갈 수록 y축값 증가.

형식구문

translate(<length-percentage>, <length-percentage>?)

translate은 단일값 또는 이중값으로 표현 가능하다.
(뒤에 있는 ?는 옵션임을 의미한다)

단일값 예시

translate(2px)

요소를 x축값 방향으로 2px 이동. y축은 그대로다.
y축값도 이동시키고 싶다면 이중값을 쓰면 된다.

이중값 예시

translate(2px,3px)

요소를 x축값 방향으로 2px 이동. y축값 방향으로 3px이동시킨다.

x축값이나,y축값 중 하나만 이동하고 싶다면 translateX,translateY를 이용해도 된다.

예시를 통해 정리하자면 다음과 같다

translate(3px), translateX(3px), translate(3px,0)은 동일하다

translateY(3px), translate(0,3px)은 동일하다

+)
translate에 transition을 함께 사용하면 웹 요소를 사용자 상호작용에 반응시키는데 효과적이다! 예를 들면 필자는 사용자가 요소에 마우스를 가져갔을 때(hover시) 요소가 애니메이션과 함께 이동하는 효과를 줬다.

.img-france img:hover {
transition: all 0.3s;
transform: translateY(-0.5rem);
}

기록 남기기