ฟังก์ชัน scaleY
ฟังก์ชัน scaleY ทำการย่อขยายองค์ประกอบ
ตามแกน Y การย่อขยายจะดำเนินการ
รอบจุดที่กำหนดโดยคุณสมบัติ transform-origin
ค่าของฟังก์ชันเป็นจำนวนเต็มหรือจำนวนทศนิยม
ถ้ามากกว่า 1 - องค์ประกอบจะขยายใหญ่ขึ้น
ถ้าน้อยกว่า (ตัวอย่างเช่น 0.5) - องค์ประกอบ
จะเล็กลง ถ้ากำหนดเป็น 1 - จะไม่มีการเปลี่ยนแปลงใดๆ
(นี่คือค่าเริ่มต้น)
ไวยากรณ์
ตัวเลือก {
transform: scaleY(ตัวเลข);
}
ตัวอย่าง
เมื่อนำเมาส์มาวางบนบล็อก เราจะขยายขนาดขึ้น 1.5
เท่าตามแกน Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleY(1.5);
}
:
ตัวอย่าง
เมื่อนำเมาส์มาวางบนบล็อก เราจะลดขนาดลง 2
เท่าตามแกน Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scaleY(0.5);
}
:
