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

<h3>CSS ปรับรูปแนวตั้ง แนวนอน โดยไม่ต้องเปลี่ยนรูป<&sol;h3>&NewLine;<p>ในการพัฒนาเว็บไซต์และสร้างรูปแบบเว็บไซต์ให้สวยงาม โดยส่วนมากเราจะอาศัย CSS<br &sol;>&NewLine;ซึ่งย่อมาจากคำว่า Cascading Style Sheets เพื่อปรับแต่ง Element ต่าง ๆ ภายในเว็บไซต์ให้สวยงาม<br &sol;>&NewLine;เช่น สีตัวอักษร ขนาดของตัวอักษร รวมไปถึงการกำหนดรูปแบบการแสดงผลของรูปภาพภายในเว็บไซต์ ก็ต้องอาศัย<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>การเขียน CSS กำกับ ในการกำหนดรูปแบบของรูป อาจจมีเหตุจำเป็นที่เราต้อง สลับด้าน ของรูปภาพ เพื่อความสวยงาม<br &sol;>&NewLine;ในการแสดงผลและเหมาะสมกับ Layout ในแต่ละขนาดหน้าจอ<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;ตัวอย่างเช่น ในการแสดงผลบน Desktop รูปภาพแสดงผลได้ตรงตามดีไซน์ แต่ในเวอร์ชั่น Mobile อาจจะต้องปรับให้<br &sol;>&NewLine;สลับด้านเพื่อความเหมาะสมและสวยงามเราสามารถใช้คำสั่ง CSS เพื่อสลับหรือกลับด้านของรูปภาพได้<br &sol;>&NewLine;โดยไม่ต้องเปลี่ยนรูปใหม่ โดยสามารถใช้คำสั่งได้ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<b>ปรับรูปแนวนอน Horizontal Flip<&sol;b><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;img &lbrace; &NewLine; -moz-transform&colon; scaleX&lpar;-1&rpar;&semi; &NewLine; -o-transform&colon; scaleX&lpar;-1&rpar;&semi; &NewLine; -webkit-transform&colon; scaleX&lpar;-1&rpar;&semi; &NewLine; transform&colon; scaleX&lpar;-1&rpar;&semi; &NewLine; filter&colon; FlipH&semi; &NewLine; -ms-filter&colon; "FlipH"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<b>ปรับรูปแนวตั้ง Vertical Flip<&sol;b><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;img &lbrace; &NewLine; -moz-transform&colon; scaleY&lpar;-1&rpar;&semi; &NewLine; -o-transform&colon; scaleY&lpar;-1&rpar;&semi; &NewLine; -webkit-transform&colon; scaleY&lpar;-1&rpar;&semi; &NewLine; transform&colon; scaleY&lpar;-1&rpar;&semi; &NewLine; filter&colon; FlipV&semi; &NewLine; -ms-filter&colon; "FlipV"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p><strong>-moz-transform<&sol;strong> ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ mozilla firefox<br &sol;>&NewLine;<strong>-o-transform<&sol;strong> ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Opera<br &sol;>&NewLine;<strong>-webkit-transform<&sol;strong> ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Safari และ Google Chrome<br &sol;>&NewLine;<strong>-ms-transform<&sol;strong> ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์ Internet Explore &lpar; เวอร์ชั่น 9 ขึ้นไป &rpar;<br &sol;>&NewLine;<strong>transform<&sol;strong> ใช้กำหนดรูปแบบ transform สำหรับเบราว์เซอร์อื่น ๆ<br &sol;>&NewLine;<strong>filter&colon; FlipH&semi;<&sol;strong> กำหนด Filter เป็น FlipH สลับในแนวนอน Horizontal<br &sol;>&NewLine;<strong>-ms-filter<&sol;strong> กำหนด -ms-filter สำหรับ Internet Explorer เป็น FlipH สลับในแนวนอน Horizontal<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;