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