CSS 트랜스라이드 속성

정의와 사용법

translate 속성은 요소의 위치를 변경할 수 있습니다.

translate 속성은 요소가 두차원 공간에서의 x 축과 y 축 좌표를 정의합니다. 또한 z 축 좌표를 정의하여 세차원 공간에서 위치를 변경할 수 있습니다.

좌표는 단순히 x 축 좌표, x 축과 y 축 좌표, 또는 x 축, y 축, z 축 좌표로 제공할 수 있습니다.

이해하기 위해 더 잘 translate 속성에 대해 더 알고 싶다면演示.

팁:z 축 속성이 효과를 발휘하려면, CSS perspective 속성에 값을 정의해야 합니다.

주의:요소를 이동하는 또 다른 기술은 z 축을 가진 CSS 트랜스라이드() 함수 이 페이지의 CSS transform 속성은 요소를 이동하는 더 간단하고 직접적인 방법입니다.

예제

예제 1

요소의 위치를 변경하려면:

div {
  translate: 100px 20px;
}

직접 시도해 보세요

예제 2

z 축을 설정할 때 translate 속성을 설정할 때, 부모 요소에도 설정해야 합니다 perspective 속성을 통해 우리는 어떤 효과도 볼 수 있습니다:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

직접 시도해 보세요

CSS 문법

translate: x-axis y-axis z-axis|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

관련 페이지

CSS 강의:CSS 2D 변환

CSS 강의:CSS 3D 변환

CSS 참조:CSS scale 속성

CSS 참조:CSS rotate 속성

CSS 참조:CSS perspective 속성