CSS3에서는 rotateX(angle) 메서드를 사용하여 요소를 X축(가로축)을 중심으로 3차원 회전시킬 수 있습니다. 괄호 안에는 각도 값을 지정하며, 양수 값은 위쪽으로, 음수 값은 아래쪽으로 요소를 기울입니다.
rotateX() 기본 문법
transform: rotateX(각도);
각도 단위는 deg(도)를 사용하며, rotateX(150deg)처럼 작성하면 해당 요소가 X축을 기준으로 150도 회전합니다.
예제
아래 예제는 두 개의 div 요소를 배치하고, 두 번째 요소에만 rotateX(150deg)를 적용하여 X축 회전 효과를 확인하는 코드입니다.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* 표준 문법 */
}
</style>
</head>
<body>
<div>
tutorialspoint.com
</div>
<p>X축 회전</p>
<div id = "myDiv">
tutorialspoint.com
</div>
</body>
</html>코드 설명
- 모든 div 요소에 공통적으로 너비 200px, 높이 100px, 분홍색 배경과 검은색 테두리를 적용했습니다.
#myDiv에만transform: rotateX(150deg)를 적용하여 X축을 중심으로 150도 회전시켰습니다.- Safari 브라우저 호환성을 위해
-webkit-접두사를 함께 작성했습니다.
참고 사항
3D 회전 효과를 더욱 입체적으로 표현하려면 부모 요소에 perspective 속성을 추가하는 것이 좋습니다. 원근감(perspective)이 있으면 회전된 요소가 실제 3D 공간에서 움직이는 것처럼 보입니다.
body {
perspective: 800px;
}또한 최신 브라우저에서는 -webkit- 접두사 없이 표준 문법인 transform: rotateX()만으로도 정상적으로 동작합니다.