CSS로 플립 아웃 Y(Flip Out Y) 애니메이션 효과 구현하기

플립 아웃 Y(Flip Out Y)는 요소가 Y축(세로 축)을 중심으로 90도 회전하면서 점점 투명해지며 화면에서 사라지는 3D 애니메이션 효과입니다. 카드가 옆으로 넘어가듯 뒤집히는 느낌을 주기 때문에 로고, 이미지, 카드형 UI 등 다양한 요소에 활용할 수 있습니다.

핵심 CSS 속성 살펴보기

perspective(400px) : 3D 변환에 원근감을 부여합니다. 값이 작을수록 왜곡이 커지고 입체적인 느낌이 강해집니다.
rotateY() : Y축을 기준으로 요소를 회전시키는 변환 함수입니다.
opacity : 회전이 진행됨에 따라 요소를 서서히 투명하게 만들어 자연스러운 소멸 효과를 연출합니다.
animation-fill-mode: both : 애니메이션이 시작되기 전과 종료된 후에도 해당 프레임의 스타일 상태를 유지합니다.
backface-visibility: visible : 요소가 뒤집히는 동안 뒷면이 보이도록 설정합니다.

아래 예제 코드를 실행하면 로고 이미지가 Y축을 따라 뒤집히며 사라지는 효과를 직접 확인할 수 있습니다.

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes flipOutY {
            0% {
               -webkit-transform: perspective(400px) rotateY(0deg);
               opacity: 1;
            }
            100% {
               -webkit-transform: perspective(400px) rotateY(90deg);
               opacity: 0;
            }
         }
         @keyframes flipOutY {
            0% {
               transform: perspective(400px) rotateY(0deg);
                  opacity: 1;
            }
            100% {
               transform: perspective(400px) rotateY(90deg);
               opacity: 0;
            }
         }
         .flipOutY {
            -webkit-backface-visibility: visible !important;
            -webkit-animation-name: flipOutY;
            backface-visibility: visible !important;
            animation-name: flipOutY;
         }
      </style>
   </head>
   <body>

      <div id = "animated-example" class = "animated flipOutY"></div>
      <button onclick = "myFunction()">Reload page</button>
     
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

코드 동작 방식

@keyframes flipOutY 규칙은 애니메이션의 시작(0%)과 끝(100%) 지점을 정의합니다. 시작 시점에는 rotateY(0deg)와 opacity: 1로 요소가 완전히 보이는 상태이며, 끝 시점에는 rotateY(90deg)와 opacity: 0으로 회전하면서 사라지는 상태가 됩니다.

-webkit- 접두사가 붙은 코드는 구형 WebKit 기반 브라우저(Safari 등)와의 호환성을 위해 포함된 것이며, 최신 브라우저에서는 표준 문법만으로도 대부분 정상적으로 동작합니다.

페이지 하단의 [Reload page] 버튼을 클릭하면 페이지가 새로고침되어 애니메이션 효과를 반복해서 확인할 수 있습니다.