CSS translate: 이동 변형

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS translate 속성은 transform 속성과 별개로 요소에 이동 변형을 적용합니다. 이 속성은 일반적인 사용자 인터페이스 변형에 더 적합하고, transform 속성에서 변형 함수들의 적용 순서를 기억하지 않아도 되므로 편리합니다.

<div class="view">
  <div class="square">Sqare</div>
</div>

.square {
  translate: none;
  /* translate: 50px; */
  /* translate: 50px 20%; */
  /* translate: 50px 20% 5rem; */
}

.view {
  perspective: 500px;
}
.square {
  align-items: center;
  background-color: cornflowerblue;
  display: flex;
  height: 100px;
  justify-content: center;
  transform: rotateY(45deg) translateX(30px);
  transform-style: preserve-3d;
  width: 100px;
}

불러오는 중...

구문

selector {
  /* 키워드 값 */
  translate: none;

  /* X 값 */
  translate: 100px;
  translate: 50%;

  /* X, Y 값 */
  translate: 100px 200px;
  translate: 50% 105px;

  /* X, Y, Z 값 */
  translate: 50% 105px 5rem;

  /* 전역 값 */
  translate: inherit;
  translate: initial;
  translate: revert;
  translate: revert-layer;
  translate: unset;
}

translate 속성에는 키워드 none 또는 한 개에서 세 개까지의 값을 사용합니다. 각각의 값은 <length> 또는 <percentage>입니다.

값을 한 개 지정하면 X축에 적용됩니다. translate() 함수에 한 개의 값을 지정하는 것과 동일합니다.
값을 두 개 지정하면 첫 번째 값은 X축, 두 번째 값은 Y축에 적용됩니다. translate() 함수에 두 개의 값을 지정하는 것과 동일합니다.
값을 세 개 지정하면 첫 번째 값은 X축, 두 번째 값은 Y축, 세 번째 값은 Z축에 적용됩니다. translate3d() 함수에 세 개의 값을 지정하는 것과 동일합니다.

값

<length-percentage>: 각 축으로의 이동 거리를 지정하는 <length> 또는 <percentage> 값입니다.
none: 이동 변형을 적용하지 않습니다.

명세

CSS Transforms Module Level 2

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`translate`
`none`

같이 보기

종합 시각적 변형: transform