rotateX 함수
rotateX 함수는 3차원 공간에서 X축을 기준으로
회전을 설정합니다. transform 속성과 함께
사용됩니다. 속성 값은 각도 단위로
지정됩니다. 양수 값은 우리 쪽으로, 음수 값은 반대 방향으로 회전시킵니다. 회전은
transform-origin 속성으로 설정된 점을 중심으로 수행됩니다.
구문
선택자 {
transform: rotateX(angle);
}
예제
이 예제에서 블록은 마우스 오버 시 X축을 기준으로
180도 회전합니다. 부드러운 회전을 위해
transition 속성이 추가되었습니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateX(180deg);
}
:
예제
transform-origin 속성을 사용하여 회전 축을 변경해 보겠습니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(180deg);
}
:
예제
음수 각도를 설정해 보겠습니다:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
