CSS3의 rotateY(angle) 메서드를 사용하면 요소를 Y축(세로축)을 중심으로 회전시킬 수 있습니다. 괄호 안에 지정하는 각도 값에 따라 요소가 회전하며, 양수 값은 시계 방향, 음수 값은 반시계 방향으로 회전합니다.
rotateY() 기본 문법
transform: rotateY(각도);
예를 들어 rotateY(150deg)라고 작성하면 해당 요소가 Y축을 기준으로 150도 회전합니다. 구형 Safari 브라우저와의 호환성을 위해 -webkit-transform 접두사를 함께 사용하는 것이 좋습니다.
예제 코드
아래 예제는 두 개의 div 요소를 만들고, 두 번째 요소에만 rotateY 변환을 적용하여 차이를 보여줍니다.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* 표준 문법 */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Y축 회전</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>코드 설명
- 모든
div요소에는 너비 200px, 높이 100px, 분홍색 배경과 검은색 테두리가 적용됩니다. #yDiv선택자에는transform: rotateY(150deg)가 적용되어 Y축을 중심으로 150도 회전합니다.-webkit-transform속성은 Safari 등 웹킷 기반 구형 브라우저를 위한 호환성 코드입니다.
실행 결과
브라우저에서 위 코드를 실행하면 첫 번째 div는 그대로 표시되고, 두 번째 div는 Y축을 따라 옆으로 눕듯이 회전된 모습으로 나타납니다. 마치 책장을 넘기듯 요소가 입체적으로 뒤집히는 효과를 확인할 수 있습니다.
참고 사항
3D 변환이 자연스럽게 보이도록 하려면 부모 요소에 perspective 속성을 추가하는 것이 좋습니다. 원근감(perspective)이 있으면 회전 효과가 더욱 입체적으로 표현됩니다.