Skip to main content

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

참고

변환(Transform)​

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 프로퍼티를 사용한다.

변형 기준점 설정​

transformOrigin 프로퍼티는 뷰의 변형 기준점을 설정한다. 변형 기준점은 변형이 적용되는 중심점을 의미한다. 기본적으로 변형 기준점은 center로 설정된다.

값​

transformOrigin은 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 가이드를 참고한다.