CSS scale รายการ

การใช้งานและการกำหนด

scale คุณสมบัตินี้อนุญาตให้คุณเปลี่ยนขนาดขององค์ประกอบ

scale คุณสมบัตินี้กำหนดค่าขยายในแนว x และ y ขององค์ประกอบ. คุณยังสามารถกำหนดค่าขยายในแนว z ด้วย

ค่าขยายสามารถเป็นค่าหนึ่ง สองหรือสามค่า

• ถ้ามีค่าหนึ่งค่า องค์ประกอบจะขยายตามร้อยละที่กำหนดในแนว x และ y ด้วยค่าเดียวกัน
• ถ้ามีค่าสองค่า องค์ประกอบจะขยายตามร้อยละที่กำหนดในแนว x และ y
• ถ้ามีค่าสามค่า องค์ประกอบจะขยายตามร้อยละที่กำหนดในแนว x, y และ z

เพื่อเข้าใจความหมายดีขึ้น scale คุณสมบัติ，โปรดดูการแสดงนี้.

注意：วิธีอื่นที่สำหรับขยายองค์ประกอบคือการใช้ CSS scale() ฟังก์ชัน ของ CSS transform ที่อธิบายในเว็บไซต์นี้ scale คุณสมบัตินี้สามารถกล่าวว่าเป็นวิธีที่ง่ายและเรียบง่ายที่สุดในการขยายองค์ประกอบ.

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนขนาดขององค์ประกอบ:

div {
  scale: 2;
}

ลองด้วยตัวเอง

ตัวอย่าง 2

เมื่อ scale เมื่อคุณกำหนดคุณสมบัติเป็นค่าสองของแนวที่แยกต่างกัน จะกำหนดขนาดในแนว x และ y ตามลำดับ. ในนี้ ขนาดขององค์ประกอบในแนว x จะเป็นสองเท่า และขนาดในแนว y จะเป็นครึ่งหนึ่ง:

div {
  scale: 2 50%;
}

ลองด้วยตัวเอง

การเขียนโค้ด CSS

scale: x-axis y-axis z-axis|initial|inherit;

ค่าคุณสมบัติ

รายละเอียดเทคนิค

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้แสดงว่าสำหรับเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

หน้าที่เกี่ยวข้อง

ตำรา:CSS 2D การเปลี่ยนแปลง

ตำรา:การทำการแปลงแบบ 3D ของ CSS

อ้างอิง：CSS rotate รายการ

อ้างอิง：CSS translate ทางแบบ