Transform Scale: ทำให้องค์ประกอบใหญ่ขึ้นนุ่มนวลเมื่อ Hover
ใช้ transform: scale() ร่วมกับ transition สร้างเอฟเฟกต์ซูมเข้า/ออก ใช้ได้กับรูปภาพ, การ์ด, ปุ่ม, หรือองค์ประกอบใดๆ
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* { box-sizing: border-box; }
.zoomDiv {
padding: 50px;
background-color: yellow;
transition: transform 0.2s;
width: 200px; height: 200px;
margin: 70px;
border-radius: 50%;
border: 4px solid rgb(78, 37, 155);
}
.zoomDiv:hover { transform: scale(1.5); }
</style>
</head>
<body>
<h1>ตัวอย่าง Zoom on Hover</h1>
<h2>Hover บนวงกลมเหลืองเพื่อดูซูม</h2>
<div class="zoomDiv"></div>
</body>
</html>คำอธิบาย
transition: transform 0.2s– ทำให้ scale นุ่มนวล 0.2 วินาทีtransform: scale(1.5)– ขยาย 1.5 เท่า (150%)border-radius: 50%– ทำให้เป็นวงกลม- transform ไม่กระทบ layout (ไม่ผลักองค์ประกอบอื่น) – ใช้ได้ปลอดภัย
เคล็ดลับเพิ่มเติม
transform-origin– กำหนดจุดศูนย์กลางการขยาย (default: center)scale(1.2, 1.5)– ขยาย x และ y ต่างกันได้- ร่วมกับ
box-shadowให้ดูมีมิติขึ้น:box-shadow: 0 10px 20px rgba(0,0,0,0.2) - เพิ่ม
cursor: pointerบอกผู้ใช้ว่าโต้ตอบได้
ประสิทธิภาพ
transform และ opacity เป็น property ที่ browser optimize ให้ (GPU accelerated) ทำให้ animation เนียน ไม่ทำให้ layout reflow
