변형(Transform) 스타일 프로퍼티

요소를 변형(scale, rotate, translate)할 때 쓰는 JSX 스타일 프로퍼티에 대해 알아봐요. 개별 축 별로도 세밀하게 제어할 수 있어요.

출처: 문서

본문

Scale

scale 프로퍼티로 요소의 크기 배율을 제어해요.

<Box scale="1.2" />

scale 프로퍼티가 auto로 설정되면 scaleX와 scaleY 프로퍼티로 요소의 배율을 제어할 수 있어요.

Prop	CSS Property	Token Category
`scale`	`scale`	-

Scale X

scaleX 프로퍼티로 요소의 scaleX 속성을 제어해요. 이때 scale 프로퍼티가 auto로 설정되어 있어야 해요.

<Box scale="auto" scaleX="1.3" />

Prop	CSS Property	Token Category
`scaleX`	`--scale-x`	-

Scale Y

scaleY 프로퍼티로 요소의 scaleY 속성을 제어해요. 이때 scale 프로퍼티가 auto로 설정되어 있어야 해요.

<Box scale="auto" scaleY="0.4" />

Prop	CSS Property	Token Category
`scaleY`	`--scale-y`	-

Rotate

rotate 프로퍼티로 요소의 회전 각도를 제어해요.

<Box rotate="45deg" />

rotate 프로퍼티가 auto로 설정되면 rotateX와 rotateY 프로퍼티로 요소의 회전을 제어할 수 있어요.

Prop	CSS Property	Token Category
`rotate`	`rotate`	-

Rotate X

rotateX 프로퍼티로 요소의 rotateX 속성을 제어해요.

<Box rotateX="45deg" />

Prop	CSS Property	Token Category
`rotateX`	`--rotate-x`	-

Rotate Y

rotateY 프로퍼티로 요소의 rotateY 속성을 제어해요.

<Box rotateY="45deg" />

Prop	CSS Property	Token Category
`rotateY`	`--rotate-y`	-

Translate

translate 프로퍼티로 요소의 위치 이동(translate)을 제어해요.

<Box translate="40px" />
<Box translate="50% -40%" />

translate 프로퍼티가 auto로 설정되면 translateX와 translateY 프로퍼티로 요소의 이동을 제어할 수 있어요.

Prop	CSS Property	Token Category
`translate`	`translate`	-

Translate X

translateX 프로퍼티로 요소의 translateX 속성을 제어해요. 이때 translate 프로퍼티가 auto로 설정되어 있어야 해요.

// hardcoded values
<Box translate="auto" translateX="50%" />
<Box translate="auto" translateX="20px" />

// token values
<Box translate="auto" translateX="4" />
<Box translate="auto" translateX="-10" />

Prop	CSS Property	Token Category
`translateX`	`--translate-x`	`spacing`

Translate Y

translateY 프로퍼티로 요소의 translateY 속성을 제어해요. 이때 translate 프로퍼티가 auto로 설정되어 있어야 해요.

// hardcoded values
<Box translate="auto" translateY="-40%" />
<Box translate="auto" translateY="4rem" />

// token values
<Box translate="auto" translateY="4" />
<Box translate="auto" translateY="-10" />

Prop	CSS Property	Token Category
`translateY`	`--translate-y`	`spacing`

변형(Transform) 스타일 프로퍼티