과정 추천:

CSS rotateX() 함수

정의와 사용법 rotateX() CSS

rotateX() 함수는 요소가 x축(수평 방향)으로 3D 회전하는 방식을 정의합니다. transform 속성에서 사용.

예제

예제 1

사용 rotateX() 이미지를 x축(수평 방향)으로 여러 개의 <div> 요소를 회전시킵니다:

#myDiv1 {
  transform: rotateX(40deg);
}
#myDiv2 {
  transform: rotateX(60deg);
}
#myDiv3 {
  transform: rotateX(80deg);
}

직접 테스트해 보세요

예제 2

사용 rotateX() 이미지를 x축(수평 방향)으로 회전시킵니다:

#img1 {
  transform: rotateX(40deg);
}
#img2 {
  transform: rotateX(60deg);
}
#img3 {
  transform: rotateX(80deg);
}

직접 테스트해 보세요

CSS 문법

rotateX(angle)
값 설명
angle

필수. 회전 각도를 지정합니다. 가능한 단위:

  • deg（도）
  • rad（반경）
  • turn（곡률）

기술 세부 사항

버전: CSS Transforms Module Level 2

브라우저 지원

테이블에 나타난 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
12 12 10 4 15

관련 페이지

튜토리얼:CSS 3D 변환

참조:CSS 트랜스폼 속성

참조:CSS rotate 속성

참조:CSS 로테이트() 함수

참조:CSS 로테이트3드() 함수

참조:CSS 로테이트Y() 함수

참조:CSS 로테이트Z() 함수