CSS3의 rotateX() 함수로 X축 3D 변환 구현하기

CSS3에서는 transform 속성과 rotateX() 함수를 사용하여 요소를 X축(가로축)을 기준으로 회전시키는 3D 변환을 손쉽게 구현할 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 동작 방식을 확인해 보세요.

rotateX()란 무엇인가?

rotateX() 함수는 요소의 중심선을 기준으로 X축 방향으로 지정한 각도만큼 회전시킵니다. 각도 값은 양수(예: 150deg) 또는 음수(예: -150deg)로 설정할 수 있으며, 값에 따라 회전 방향이 달라집니다.

예제 코드

<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, 분홍색 배경과 검은색 테두리가 적용되어 있습니다.
id가 myDiv인 두 번째 div에는 transform: rotateX(150deg)가 적용되어 X축을 기준으로 150도 회전합니다.
-webkit-transform 접두사는 Safari 등 구형 WebKit 기반 브라우저와의 호환성을 위한 것입니다.

참고 사항

3D 변환이 자연스럽게 보이도록 하려면 부모 요소에 perspective 속성을 추가하는 것이 좋습니다. perspective 값이 있으면 원근감이 생겨 회전 효과가 더 입체적으로 표현됩니다.