rotate
rotate
rotate 유틸리티는 요소를 회전시킬 때 사용해요. 2D 회전뿐 아니라 rotate-x, rotate-y, rotate-z 같은 3D 회전까지 지원해요.
출처: 문서
본문
클래스 스타일 (ClassStyles)
회전 (Rotation)
| 클래스 | CSS |
|---|---|
rotate-none |
rotate: none; |
rotate-<number> |
rotate: <number>deg; |
-rotate-<number> |
rotate: calc(<number>deg * -1); |
rotate-(<custom-property>) |
rotate: var(<custom-property>); |
rotate-[<value>] |
rotate: <value>; |
x축 회전 (Rotation on x-axis)
| 클래스 | CSS |
|---|---|
rotate-x-<number> |
transform: rotateX(<number>deg) var(--tw-rotate-y); |
-rotate-x-<number> |
transform: rotateX(-<number>deg) var(--tw-rotate-y); |
rotate-x-(<custom-property>) |
transform: rotateX(var(<custom-property>)) var(--tw-rotate-y); |
rotate-x-[<value>] |
transform: rotateX(<value>) var(--tw-rotate-y); |
y축 회전 (Rotation on y-axis)
| 클래스 | CSS |
|---|---|
rotate-y-<number> |
transform: var(--tw-rotate-x) rotateY(<number>deg); |
-rotate-y-<number> |
transform: var(--tw-rotate-x) rotateY(-<number>deg); |
rotate-y-(<custom-property>) |
transform: var(--tw-rotate-x) rotateY(var(<custom-property>)); |
rotate-y-[<value>] |
transform: var(--tw-rotate-x) rotateY(<value>); |
z축 회전 (Rotation on z-axis)
| 클래스 | CSS |
|---|---|
rotate-z-<number> |
transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(<number>deg); |
-rotate-z-<number> |
transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(-<number>deg); |
rotate-z-(<custom-property>) |
transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(var(<custom-property>)); |
rotate-z-[<value>] |
transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(<value>); |
예시 (Examples)
기본 예시 (Basic example)
rotate-<number> 형태의 유틸리티(예: rotate-45, rotate-90)를 사용하면 요소를 각도만큼 회전시킬 수 있어요:
<img class="rotate-45 ..." src="/img/mountains.jpg" />
<img class="rotate-90 ..." src="/img/mountains.jpg" />
<img class="rotate-210 ..." src="/img/mountains.jpg" />
음수 값 사용하기 (Using negative values)
-rotate-<number> 형태의 유틸리티(예: -rotate-45, -rotate-90)를 사용하면 요소를 반시계 방향으로 회전시킬 수 있어요:
<img class="-rotate-45 ..." src="/img/mountains.jpg" />
<img class="-rotate-90 ..." src="/img/mountains.jpg" />
<img class="-rotate-210 ..." src="/img/mountains.jpg" />
3D 공간에서 회전하기 (Rotating in 3D space)
rotate-x-<number>, rotate-y-<number>, rotate-z-<number> 유틸리티(예: rotate-x-50, -rotate-y-30, rotate-z-45)를 함께 사용하면 요소를 3D 공간에서 회전시킬 수 있어요:
<img class="rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
<img class="rotate-x-15 -rotate-y-30 ..." src="/img/mountains.jpg" />
<img class="rotate-y-25 rotate-z-30 ..." src="/img/mountains.jpg" />
커스텀 값 사용하기 (Using a custom value)
rotate-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 회전을 설정할 수 있어요:
<img class="rotate-[3.142rad] ..." src="/img/mountains.jpg" />
CSS 변수의 경우 rotate-(<custom-property>) 문법을 사용할 수도 있어요:
<img class="rotate-(--my-rotation) ..." src="/img/mountains.jpg" />
이것은 rotate-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.
반응형 디자인 (Responsive design)
rotate 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:
<img class="rotate-45 md:rotate-60 ..." src="/img/mountains.jpg" />
더 알아보기 (Learn more)
변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.