CSS translate() 메서드란?
CSS에서 translate(x, y) 함수를 사용하면 요소를 x축과 y축 방향으로 동시에 이동시킬 수 있습니다. 이 함수는 요소의 위치를 변경하지만, 기존 레이아웃에는 영향을 주지 않는다는 점에서 일반적인 위치 지정 방식과 차별화됩니다.
문법
translate(x,y)
여기서 각 매개변수의 의미는 다음과 같습니다.
- x: 이동 벡터의 x좌표(가로 방향 이동 거리)를 나타내는 길이 값입니다.
- y: 이동 벡터의 y좌표(세로 방향 이동 거리)를 나타내는 길이 값입니다.
y 값은 생략할 수 있으며, 생략할 경우 기본값인 0이 적용되어 x축 방향으로만 이동합니다. 음수 값을 사용하면 반대 방향으로 이동시킬 수도 있습니다.
예제
다음 예제에서는 두 개의 div 요소를 만들고, 하나는 원래 위치에 두고 다른 하나는 translate()를 적용해 이동시킵니다.
div {
width: 50px;
height: 50px;
background-color: orange;
}
.trans {
transform: translate(20px);
background-color: black;
}위 코드에서 .trans 클래스가 적용된 검은색 요소는 translate(20px)에 의해 x축 방향으로 20px 이동합니다. y값이 지정되지 않았기 때문에 세로 방향으로는 움직이지 않습니다. 만약 대각선 방향으로 이동시키고 싶다면 transform: translate(20px, 30px);처럼 두 값을 함께 지정하면 됩니다.