CSS Flip Effect: สร้างภาพกระจก (Legacy IE Filter)

Flip Effect (IE Legacy)

เอฟเฟกต์ Flip เป็นฟิลเตอร์เก่าของ Internet Explorer สร้างภาพกระจก (mirror image) ขององค์ประกอบ

พารามิเตอร์ 2 แบบ

ตัวอย่างการใช้งาน

<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>Text Example:</p>
  <div style="
    width: 300px; height: 50px;
    font-size: 30pt; font-family: Arial Black;
    color: red; filter: FlipV
  ">CSS Tutorials</div>
</body>
</html>

⚠️ สำคัญ: เฉพาะ Internet Explorer

เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C ไม่ทำงานในเบราว์เซอร์สมัยใหม่

ทางเลือกมาตรฐาน (Modern CSS)

/ Flip Horizontal (ซ้าย-ขวา) /
.flip-h {
  transform: scaleX(-1);
}

/* Flip Vertical (บน-ล่าง) */
.flip-v {
  transform: scaleY(-1);
}

/* Flip ทั้งสองแกน (หมุน 180°) */
.flip-both {
  transform: rotate(180deg);
  /* หรือ */
  transform: scale(-1, -1);
}

/* 3D Flip Card */
.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

สรุป

ใช้ transform: scaleX(-1) หรือ scaleY(-1) แทน ซึ่งเป็นมาตรฐาน CSS3 รองรับทุกเบราว์เซอร์สมัยใหม่