CSS 뒤집기(Flip) 효과란?
뒤집기(Flip) 효과는 객체의 거울상(mirror image)을 만들어 주는 필터입니다. 이 필터에는 다음 두 가지 매개변수를 사용할 수 있습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | FlipH 객체의 좌우가 반전된 수평 방향 거울상을 생성합니다. |
| 2 | 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를 사용해 상하로 뒤집힙니다. 아래의 div 요소 역시 FlipV 필터가 적용되어 텍스트가 세로로 반전되어 표시됩니다.
참고 사항
Filter 속성은 과거 Internet Explorer에서만 지원되던 비표준 속성입니다. 최신 브라우저에서 동일한 효과를 구현하려면 CSS3의 transform 속성을 사용하는 것이 좋습니다.
- 좌우 반전:
transform: scaleX(-1); - 상하 반전:
transform: scaleY(-1);
transform 속성은 모든 모던 브라우저에서 표준으로 지원되므로, 새로운 프로젝트에서는 이 방식을 사용하는 것을 권장합니다.