CSS만으로 마우스 오버 시 이미지 뒤집기 구현하기

웹 페이지에서 이미지에 마우스를 올렸을 때 이미지를 좌우로 뒤집는 효과는 CSS의 transform 속성만으로 간단하게 구현할 수 있습니다. JavaScript 없이 순수 CSS만 사용하기 때문에 코드가 가볍고 페이지 성능에도 유리합니다.

핵심 원리

이미지를 뒤집을 때는 transform: scaleX(-1) 값을 사용합니다. scaleX()는 요소를 가로 방향으로 확대·축소하는 함수로, 값이 -1이면 이미지가 좌우로 반전됩니다. 만약 세로 방향으로 뒤집고 싶다면 scaleY(-1)을 사용하면 됩니다.

여기에 :hover 가상 클래스 선택자를 함께 사용하면, 사용자가 해당 요소 위에 마우스 포인터를 올렸을 때만 스타일이 적용되도록 만들 수 있습니다.

예제 코드

아래 예제에서는 이미지 위에 마우스를 올리는 순간 이미지가 좌우로 뒤집힙니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .myimg:hover {
      transform: scaleX(-1);
    }
  </style>
</head>
<body>
  <h2>마우스 오버 이미지 뒤집기</h2>
  <p>이미지 위에 마우스를 올려 보세요:</p>
  <img class="myimg" src="https://www.tutorialspoint.com/python/images/python_data_science.jpg"
       alt="Python Data Science" width="300" height="200">
</body>
</html>

코드 설명

.myimg:hover — myimg 클래스를 가진 이미지에 마우스 포인터가 올라왔을 때 스타일을 적용하는 선택자입니다.
transform: scaleX(-1) — 이미지를 가로축을 기준으로 반전시켜 좌우로 뒤집는 역할을 합니다.

부드러운 전환 효과 추가하기

transition 속성을 함께 지정하면 이미지가 뒤집히는 동작이 갑작스럽게 바뀌지 않고 자연스러운 애니메이션으로 연출됩니다.

.myimg {
  transition: transform 0.5s ease;
}
.myimg:hover {
  transform: scaleX(-1);
}

이처럼 transform과 :hover만 조합하면 별도의 스크립트 없이도 직관적인 인터랙션 효과를 손쉽게 만들 수 있습니다.