과목 추천:

CSS rotate3d() 함수

정의와 사용법 rotate3d() CSS

rotate3d() 함수는 요소의 3D 회전을 정의합니다. transform 속성에 사용됩니다.

인스턴스

예제 1

사용 rotate3d() 여러 <div> 요소를 회전:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

직접 시도해 보세요

예제 2

사용 rotate3d() 이미지 회전:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

직접 시도해 보세요

CSS 문법

rotate3d(x, y, z, angle)
값 설명
x 양수 또는 음수, x축을 따라 회전을 정의합니다.
y 양수 또는 음수, y축을 따라 회전을 정의합니다.
z 양수 또는 음수, z축을 따라 회전을 정의합니다.
angle

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

  • deg（도）
  • rad（라디안）
  • turn（원）

기술 세부 사항

버전: CSS 변환 모듈 레벨 2

브라우저 지원

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

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

관련 페이지

교육:CSS 3D 변환

참조:CSS 트랜스폼 속성

참조:CSS rotate 속성

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

참조:CSS 래테이트X() 함수

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

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