웹 페이지에서 이미지를 좌우 반전시켜 거울 효과를 내고 싶다면 CSS의 transform 속성만으로 충분합니다. 별도의 이미지 편집 도구나 자바스크립트 없이 scaleX(-1) 값 하나만으로 요소를 수평으로 뒤집을 수 있으며, :hover 가상 클래스와 조합하면 마우스를 올렸을 때 반전되는 인터랙티브한 효과도 손쉽게 만들 수 있습니다.
핵심 원리
transform: scaleX(-1)은 요소를 X축(가로 방향) 기준으로 -1배 변형하는데, 그 결과가 바로 좌우 반전입니다. 세로 방향 반전이 필요하다면 scaleY(-1)을 사용하면 되고, 두 값을 함께 적용하면 상하좌우가 모두 뒤집힙니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img:hover {
transform: scaleX(-1);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>이미지 뒤집기 예제</h1>
<img src="https://i.picsum.photos/id/551/400/400.jpg">
<h1>위 이미지에 마우스를 올리면 거울처럼 반전됩니다</h1>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이미지 위에 마우스 커서를 올리면 아래와 같이 좌우가 반전된 모습을 확인할 수 있습니다.
활용 팁
반전 효과가 갑자기 바뀌는 것이 어색하다면 img { transition: transform 0.5s; }를 추가해 보세요. 마우스를 올리고 뗄 때 부드러운 애니메이션과 함께 반전되어 훨씬 자연스러운 사용자 경험을 제공합니다. 또한 로고나 아이콘을 반전시킬 때도 동일한 원리를 그대로 적용할 수 있습니다.