CSS Transform 알아보기(2) - translate

CSS Transform - translate 알아보기

오늘은 CSS Transform의 속성 중 하나인 translate에 대해 알아보자.

기본적으로 translate는 위치를 이동하는 것이라고 생각하면 된다.

 

translate는 아래와 같이 총 4가지의 종류로 사용할 수 있다.

한번 이 translate가 어떻게 적용되는지 간단하게 알아보자.

 

우리가 보는 웹 페이지는 기본적이로 2d이지만 원근법을 바탕으로 3d의 효과를 줄 수 있다.

아래처럼 3차원의 기본 개념을 바탕으로 translate를 통해 좌표를 이동한다고 생각하면된다.

translate(x, y)

.element {
    transform: translate(50px, 30px);
}

기본적으로 설정 된 현재 위치로 부터 x, y축으로 특정 거리만큼 이동한다.

translateX, translateY를 함께 사용한 것과 동일한 효과이다.

translateX(x)

.element {
    transform: translateX(50px);
}

기본적으로 설정 된 현재의 위치로 부터 x축으로 특정 거리만큼 이동한다.

translateY(y)

.element {
    transform: translateY(30px);
}

기본적으로 설정 된 현재의 위치로 부터 y축으로 특정 거리만큼 이동한다.

translate3d(x, y, z)

.element-wrapper {
    perspective: 500px; // 관찰자가 500px 떨어진 위치에서 관찰하고 있다는 의미
}

.element {
    transform: translate3d(50px, 30px, -40px);
}

기본적으로 설정 된 현재의 위치로 부터 x, y, z축으로 특정 거리만큼 이동한다.

translateX, translateY, translateZ를 함께 사용한 것과 동일한 효과이다.

그러나 2d와는 달리 이를 감싸고 있는 요소에 perspective를 통해 원근값을 설정해주어야 한다.

translateZ(z)

.element-wrapper {
    perspective: 500px; // 관찰자가 500px 떨어진 위치에서 관찰하고 있다는 의미
}

.element {
    transform: translateZ(-40px);
}

기본적으로 설정 된 현재의 위치로 부터 z축으로 특정 거리만큼 이동한다.

translate3d와 동일하게 perspective를 통해 원근값을 설정해주어야 한다.

 

실제 이를 적용한 예제를 살펴보며 마무리하자.

 

See the Pen translate by Seoungtae Kim (@seong954t) on CodePen.

transition을 통해 변화과정을 스르륵~, 샤라락~, 휘리릭 하면서 보여줄 수 있다.