CSS3 rotateY()로 구현하는 Y축 3D 변환 완벽 가이드

CSS3의 rotateY() 함수를 사용하면 요소를 세로축(Y축)을 기준으로 회전시키는 3D 변환 효과를 간단하게 구현할 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 Y축 3D 변환이 실제로 어떻게 동작하는지 확인해 보세요.

예제 코드

<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>
         tutorialspoint.com
      </div>
      <p>Rotate Y axis</p>
      <div id="yDiv">
         tutorialspoint.com.
      </div>
   </body>
</html>

코드 설명

rotateY(150deg): 요소를 Y축(세로축)을 중심으로 150도 회전시킵니다. 각도 값을 변경하면 회전 정도를 자유롭게 조절할 수 있습니다.
-webkit-transform: Safari 등 WebKit 기반 브라우저에서 3D 변환을 지원하기 위한 벤더 접두사(vendor prefix) 문법입니다.
transform: W3C 표준 문법으로, Chrome·Firefox·Edge 등 대부분의 최신 브라우저에서 정상적으로 동작합니다.

실행 결과

위 코드를 실행하면 분홍색 배경의 div 요소 두 개가 화면에 나타나며, 그중 아래쪽 요소는 Y축을 기준으로 150도 회전되어 마치 책 페이지를 넘기듯 옆으로 기울어진 것처럼 보입니다.

꿀팁: perspective로 입체감 살리기

회전 효과에 깊이감을 더하고 싶다면 perspective 속성을 함께 사용해 보세요. 예를 들어 부모 요소에 perspective: 600px;을 적용하면 원근감이 있는 훨씬 사실적인 3D 효과를 연출할 수 있습니다.