플립(Flip) 효과란?
CSS의 플립(flip) 효과는 객체의 거울상, 즉 미러 이미지를 만들 때 사용됩니다. 이미지나 텍스트를 좌우 또는 상하로 뒤집어 반사된 듯한 시각적 효과를 손쉽게 구현할 수 있습니다.
이 필터에는 다음 두 가지 매개변수를 사용할 수 있습니다.
| 매개변수 | 설명 |
|---|---|
| FlipH | 수평 방향 미러 이미지를 생성합니다 (좌우 반전) |
| FlipV | 수직 방향 미러 이미지를 생성합니다 (상하 반전) |
예제
다음 코드를 실행하면 이미지와 텍스트에 미러 효과를 적용할 수 있습니다.
<html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipH"> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: FlipV"> <p>텍스트 예시:</p> <div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div> </body> </html>
위 예제에서 첫 번째 로고 이미지는 FlipH로 인해 좌우가 뒤집히고, 두 번째 로고는 FlipV로 인해 상하가 뒤집혀 출력됩니다. 아래 텍스트 요소 역시 FlipV 필터로 상하 반전된 모습을 볼 수 있습니다.
참고: 최신 브라우저에서의 대안
Filter: FlipH / FlipV는 과거 Internet Explorer에서만 지원되던 비표준 속성입니다. 크롬, 파이어폭스, 사파리 등 현대 브라우저에서 동일한 효과를 구현하려면 표준인 transform 속성을 사용하는 것이 좋습니다.
/* 수평 반전 (FlipH 대체) */
img {
transform: scaleX(-1);
}
/* 수직 반전 (FlipV 대체) */
img {
transform: scaleY(-1);
}transform은 모든 최신 브라우저에서 안정적으로 지원되며, 애니메이션 및 트랜지션과 함께 활용하기도 훨씬 유연합니다.