Hiệu ứng Flip (Lật gương) với CSS Filter (Legacy)

Bộ lọc Flip - Microsoft Legacy Filter

Cảnh báo: Filter: FlipH và Filter: FlipV là **Microsoft proprietary filters (IE 4-9)**, **không phải CSS chuẩn** và **đã bị loại bỏ** khỏi trình duyệt hiện đại.

Các tham số cũ (chỉ IE)

Thay thế hiện đại: CSS Transform

Dùng transform: scaleX(-1) hoặc scaleY(-1) - chuẩn W3C, hỗ trợ mọi trình duyệt:

Lật ngang (FlipH equivalent)

.flip-horizontal {
  transform: scaleX(-1); /* Lật trái-phải */
  display: inline-block; /* Cần inline-block hoặc block */
}

Lật dọc (FlipV equivalent)

.flip-vertical {
  transform: scaleY(-1); /* Lật trên-dưới */
  display: inline-block;
}

Lật cả hai (Rotate 180deg)

.flip-both {
  transform: rotate(180deg); /* Hoặc scale(-1, -1) */
}

Ví dụ hoàn chỉnh hiện đại

<!DOCTYPE html>
<html>
<head>
  <style>
    .original { width: 200px; }
    .flip-h { transform: scaleX(-1); display: inline-block; }
    .flip-v { transform: scaleY(-1); display: inline-block; }
    .flip-both { transform: rotate(180deg); display: inline-block; }
    
    /* Áp dụng cho text */
    .text-flip-v {
      display: inline-block;
      transform: scaleY(-1);
      color: red;
      font: 30pt 'Arial Black';
    }
  </style>
</head>
<body>
  <img src="logo.png" alt="Logo gốc" class="original">
  <img src="logo.png" alt="Lật ngang" class="original flip-h">
  <img src="logo.png" alt="Lật dọc" class="original flip-v">
  
  <p>Text Example:</p>
  <div class="text-flip-v">CSS Tutorials</div>
</body>
</html>

Lưu ý quan trọng

• transform không ảnh hưởng layout (vẫn chiếm diện tích gốc)
• Cần display: inline-block hoặc block cho ảnh/text
• Kết hợp transform-origin để thay đổi trục lật
• Hỗ trợ tất cả trình duyệt hiện đại (IE9+)