트랜스폼은 2D 또는 3D 변환을 사용해 컴포넌트의 외형과 위치를 수정할 수 있는 스타일 속성이다. 하지만 트랜스폼을 적용하면 변환된 컴포넌트 주변의 레이아웃은 그대로 유지되기 때문에 인접한 컴포넌트와 겹칠 수 있다. 이러한 겹침을 방지하려면 변환된 컴포넌트에 마진을 추가하거나, 주변 컴포넌트에 마진을 적용하거나, 컨테이너에 패딩을 설정할 수 있다.

참조

트랜스폼

transform은 트랜스폼 객체 배열 또는 공백으로 구분된 문자열 값을 받는다. 각 객체는 트랜스폼할 속성을 키로 지정하고, 변환할 값을 값으로 지정한다. 객체를 결합해서는 안 되며, 각 객체마다 단일 키/값 쌍을 사용한다.

회전(rotate) 트랜스폼은 각도(deg) 또는 라디안(rad)으로 표현할 수 있도록 문자열을 요구한다. 예를 들어:

js

{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

동일한 결과를 공백으로 구분된 문자열로도 표현할 수 있다:

js

{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

기울임(skew) 트랜스폼은 각도(deg)로 표현할 수 있도록 문자열을 요구한다. 예를 들어:

js

{
  transform: [{skewX: '45deg'}],
}

타입	필수 여부
객체 배열: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} 또는 문자열	아니오

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

더 이상 사용되지 않음. 대신 transform prop을 사용한다.

transformOrigin 속성

transformOrigin 속성은 뷰의 변환(transform)이 적용되는 기준점을 설정한다. 변환 기준점은 변환이 적용되는 중심점을 의미한다. 기본적으로 변환 기준점은 center로 설정된다.

예제

변환 기준점

변환 기준점(transform origin)은 px, percentage 그리고 top, left, right, bottom, center와 같은 키워드 값을 지원한다.

transformOrigin 속성은 하나, 두 개, 혹은 세 개의 값으로 지정할 수 있다. 각 값은 오프셋을 나타낸다.

단일 값 구문

• 값은 px, percentage, 또는 left, center, right, top, bottom 키워드 중 하나여야 한다.

js

{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

두 값 구문:

• 첫 번째 값(x-offset)은 px, percentage, 또는 left, center, right 키워드 중 하나여야 한다.
• 두 번째 값(y-offset)은 px, percentage, 또는 top, center, bottom 키워드 중 하나여야 한다.

js

{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

세 가지 값으로 구성된 문법

• 처음 두 값은 두 가지 값으로 구성된 문법과 동일하다.
• 세 번째 값(z-offset)은 반드시 px 단위여야 한다. 이 값은 항상 Z축 오프셋을 나타낸다.

js

{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

배열 구문

transformOrigin은 배열 구문도 지원한다. 이 기능은 Animated API와 함께 사용할 때 편리하다. 또한 문자열 파싱을 피할 수 있어 더 효율적이다.

js

{
  // 숫자 값 사용
  transformOrigin: [10, 30, 40],
  // 숫자와 백분율 값 혼합 사용
  transformOrigin: [10, '20%', 0],
}

추가 정보는 MDN의 Transform origin 가이드를 참고할 수 있다.