• 목록
• 게시판 리스트 옵션
  • 검색

CSS 트랜스폼 rotate() 함수

rotate() 함수는 요소를 지정한 각도(angle)만큼 회전시킬 때 사용합니다. 

2차원 평면에서의 회전뿐만 아니라, X, Y, Z축을 기준으로 하는 3차원 회전까지 지원하여 생동감 있는 UI를 만드는 데 핵심적인 역할을 합니다.

1. 기본 문법 및 단위

transform: rotate(angle); 형태로 작성하며, 주로 다음과 같은 단위를 사용합니다.

• deg (Degrees): 도 단위 (예: 45deg, 180deg)

• turn (Turns): 바퀴 단위 (예: 0.5turn은 180도, 1turn은 360도)

• 양수 값: 시계 방향(Clockwise)으로 회전

• 음수 값: 시계 반대 방향(Counter-clockwise)으로 회전

2. 3D 회전 함수 (축 기준 회전)

기본 rotate()는 Z축(화면을 뚫고 나오는 축)을 기준으로 회전하는 것과 같습니다. 특정 축을 기준으로 돌리고 싶을 때 다음 함수들을 사용합니다.

• rotateX(angle): X축(가로선)을 기준으로 회전 (위아래로 뒤집히는 효과)

• rotateY(angle): Y축(세로선)을 기준으로 회전 (좌우로 뒤집히는 효과, 카드 뒤집기 등에 사용)

• rotateZ(angle): Z축을 기준으로 회전 (기본 rotate와 동일)

• rotate3d(x, y, z, angle): 사용자 정의 축을 기준으로 3차원 회전

3. 주요 특징 및 활용 팁

• 회전 중심점 (transform-origin): 기본적으로 요소의 정중앙(center)을 기준으로 회전합니다. 문을 여는 효과처럼 한쪽 끝을 기준으로 돌리고 싶다면 transform-origin 속성을 변경해야 합니다.

  • 예: transform-origin: left top; (왼쪽 상단 꼭짓점을 축으로 회전)

• 인라인 요소 주의: <span>이나 <a> 같은 인라인(inline) 요소에는 transform이 적용되지 않습니다. 반드시 display: inline-block; 또는 block;으로 설정해야 합니다.

• 실전 활용 (아이콘 애니메이션): 메뉴 버튼(햄버거 버튼)을 'X' 모양으로 바꾸거나, 화살표 아이콘을 아래로 돌릴 때 자주 쓰입니다.

  CSS

  .arrow-icon.active {
    transform: rotate(180deg); /* 아이콘을 180도 뒤집음 */
    transition: transform 0.3s; /* 부드러운 회전 효과 */
  }
  

4. 3D 효과를 위한 원근감 (Perspective)

rotateX나 rotateY를 사용할 때, 부모 요소에 perspective 속성을 주면 훨씬 실감 나는 입체 회전 효과를 볼 수 있습니다. 

원근감이 없으면 단순히 요소가 찌그러지는 것처럼 보일 수 있으니 주의하세요!

• 목록
• 게시판 리스트 옵션
  • 검색