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