Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ฟังก์ชันสเกล CSS()


ฟังก์ชัน 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>

ผลลัพธ์

ฟังก์ชันสเกล CSS()

ตัวอย่าง

เรามาดูตัวอย่างอื่นกัน −

<!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>

ผลลัพธ์

ฟังก์ชันสเกล CSS()