CSS만으로 요소가 X축을 기준으로 뒤집히며 사라지는 Flip Out X 애니메이션 효과를 구현할 수 있습니다. 이 효과는 @keyframes와 transform 속성의 perspective(), rotateX() 함수를 활용하여 만들며, 애니메이션이 진행됨에 따라 불투명도(opacity)가 1에서 0으로 변하면서 요소가 자연스럽게 화면에서 사라지는 연출이 가능합니다.
아래 예제 코드를 실행하여 Flip Out X 애니메이션 효과를 직접 확인해 보세요.
예제
<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 flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
</style>
</head>
<body>
<div id = "animated-example" class = "animated flipOutX"></div>
<button onclick = "myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>코드 설명
- animation-duration: 1s — 애니메이션이 1초 동안 진행되도록 설정합니다.
- animation-fill-mode: both — 애니메이션 시작 전후에도 스타일 상태가 유지되도록 합니다.
- perspective(400px) — 3D 변형에 깊이감을 부여하여 회전이 입체적으로 보이게 합니다.
- rotateX(90deg) — 요소를 X축 기준으로 90도 회전시켜 뒤집히듯 사라지는 효과를 줍니다.
- backface-visibility: visible — 회전 중 요소의 뒷면이 보이지 않도록 가시성을 명시적으로 지정합니다.
페이지를 다시 로드하면 애니메이션을 반복해서 확인할 수 있으며, 위 코드를 응용하면 카드 플립 메뉴, 이미지 전환 등 다양한 웹 UI 인터랙션에 활용할 수 있습니다.