CSS ปรับรูปแนวตั้ง แนวนอน โดยไม่ต้องเปลี่ยนรูป

CSS ปรับรูปแนวตั้ง แนวนอน โดยไม่ต้องเปลี่ยนรูป

ในการพัฒนาเว็บไซต์และสร้างรูปแบบเว็บไซต์ให้สวยงาม โดยส่วนมากเราจะอาศัย CSS
ซึ่งย่อมาจากคำว่า Cascading Style Sheets เพื่อปรับแต่ง Element ต่าง ๆ ภายในเว็บไซต์ให้สวยงาม
เช่น สีตัวอักษร ขนาดของตัวอักษร รวมไปถึงการกำหนดรูปแบบการแสดงผลของรูปภาพภายในเว็บไซต์ ก็ต้องอาศัย

การเขียน CSS กำกับ ในการกำหนดรูปแบบของรูป อาจจมีเหตุจำเป็นที่เราต้อง สลับด้าน ของรูปภาพ เพื่อความสวยงาม
ในการแสดงผลและเหมาะสมกับ Layout ในแต่ละขนาดหน้าจอ


ตัวอย่างเช่น ในการแสดงผลบน Desktop รูปภาพแสดงผลได้ตรงตามดีไซน์ แต่ในเวอร์ชั่น Mobile อาจจะต้องปรับให้
สลับด้านเพื่อความเหมาะสมและสวยงามเราสามารถใช้คำสั่ง CSS เพื่อสลับหรือกลับด้านของรูปภาพได้
โดยไม่ต้องเปลี่ยนรูปใหม่ โดยสามารถใช้คำสั่งได้ดังนี้


ปรับรูปแนวนอน Horizontal Flip

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

ปรับรูปแนวตั้ง Vertical Flip

img {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

-moz-transform ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ mozilla firefox
-o-transform ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Opera
-webkit-transform ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Safari และ Google Chrome
-ms-transform ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Internet Explore ( เวอร์ชั่น 9 ขึ้นไป )
transform ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์อื่น ๆ
filter: FlipH; กำหนด Filter เป็น FlipH สลับในแนวนอน Horizontal
-ms-filter กำหนด -ms-filter สำหรับ Internet Explorer เป็น FlipH สลับในแนวนอน Horizontal