rotateX 함수

rotateX 함수는 3차원 공간에서 X축을 기준으로 회전을 설정합니다. transform 속성과 함께 사용됩니다. 속성 값은 각도 단위로 지정됩니다. 양수 값은 우리 쪽으로, 음수 값은 반대 방향으로 회전시킵니다. 회전은 transform-origin 속성으로 설정된 점을 중심으로 수행됩니다.

구문

css선택자 {
  transform: rotateX(angle);
}

예제

이 예제에서 블록은 마우스 오버 시 X축을 기준으로 180도 회전합니다. 부드러운 회전을 위해 transition 속성이 추가되었습니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

예제

transform-origin 속성을 사용하여 회전 축을 변경해 보겠습니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

예제

음수 각도를 설정해 보겠습니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

참고 항목