Lật ảnh khi di chuột qua với CSS (transform: scaleX(-1))

Lật ảnh ngang (Flip Horizontal) với transform

Dùng `transform: scaleX(-1)` để **lật ngang (mirror horizontally)** ảnh khi hover. Kết hợp `transition` để mượt mà.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    .myimg {
      transition: transform 0.4s ease;  /* Mượt khi lật */
    }
    .myimg:hover {
      transform: scaleX(-1);            /* Lật ngang */
    }
  </style>
</head>
<body>
  <h2>Flip Image on Hover</h2>
  <p>Di chuột qua ảnh để lật ngang:</p>
  <img class="myimg" 
       src="python_data_science.jpg" 
       alt="Python Data Science" 
       width="300" height="200">
</body>
</html>

Các biến thể Flip

Flip 3D Card (Nâng cao)

<!DOCTYPE html>
<html>
<head>
  <style>
    .flip-card {
      width: 300px; height: 200px;
      perspective: 1000px;           /* Khoảng cách mắt nhìn 3D */
    }
    .flip-card-inner {
      position: relative;
      width: 100%; height: 100%;
      transform-style: preserve-3d;  /* Cho phép con 3D */
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);    /* Lật 3D */
    }
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%; height: 100%;
      backface-visibility: hidden;   /* Ẩn mặt sau */
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; font-weight: bold;
    }
    .flip-card-front { background: #3b82f6; color: white; }
    .flip-card-back { background: #10b981; color: white; transform: rotateY(180deg); }
  </style>
</head>
<body>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">Front</div>
      <div class="flip-card-back">Back</div>
    </div>
  </div>
</body>
</html>

Lưu ý quan trọng

• `scaleX(-1)` lật **toàn bộ element** (kể cả text, child elements) - text sẽ bị ngược.
• Dùng `transform-origin` thay đổi trục lật (mặc định center).
• Flip 3D cần `perspective` trên cha hoặc `transform: perspective(1000px) rotateY(180deg)` trên con.
• Performance: `transform` GPU accelerated - mượt mà.

Accessibility

Hiệu ứng flip chỉ visual. Screen reader vẫn đọc nội dung bình thường. Nếu nội dung mặt sau quan trọng, cần ARIA hoặc JS toggle.