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;
}불러오는 중...
구문
/* 키워드 값 */
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이동 변형을 적용하지 않습니다.
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
translate | |||||||||
none | |||||||||