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