강의 추천:

CSS rotateY() 함수

정의와 사용법 rotateY() CSS

rotateY() 함수는 요소가 y축(직립 방향)을 중심으로 3D 회전하는 것을 정의합니다. transform 속성에 사용됩니다.

실例

예제 1

사용 rotateY() 이미지를 y축(직립 방향)에 기울인 여러 <div> 요소를 회전합니다:

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

직접 테스트해 보세요

예제 2

사용 rotateY() 이미지를 y축(직립 방향)에 기울입니다:

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

직접 테스트해 보세요

CSS 문법

rotateY(angle)
설명
angle

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

  • deg(도)
  • rad(확각)
  • turn(반원)

기술 세부 사항

버전: CSS Transforms Module Level 2

브라우저 지원

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

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

관련 페이지

튜토리얼:CSS 3D 변환

참조:CSS 트랜스폼 속성

참조:CSS rotate 속성

참조:CSS 라운지() 함수

참조:CSS 라운지3d() 함수

참조:CSS 라운지X() 함수

참조:CSS 라운지Z() 함수