ฟังก์ชัน scale() ใน CSS ใช้เพื่อกำหนดการแปลงที่ปรับขนาดองค์ประกอบบนระนาบ 2D กำหนดปริมาณการปรับขนาดในแต่ละทิศทางเป็นพารามิเตอร์ของฟังก์ชัน scale()
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(100px, 10%); } .scale_img { transform: scale(1.2); background-color: yellow; } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> <img class="scale_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> </body> </html>
ผลลัพธ์
ตัวอย่าง
เรามาดูตัวอย่างอื่นกัน −
<!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(100px, 10%); } .scale_img { transform: scale(0.3); } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> <img class="scale_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> </body> </html>
ผลลัพธ์