Thuộc tính scale của CSS

Tham khảo: Trang trước
Trang tiếp theo @scope

Khóa học khuyến nghị:

scale Định nghĩa và cách sử dụng

scale Thuộc tính này cho phép bạn thay đổi kích thước của phần tử.

Thuộc tính này định nghĩa giá trị tỷ lệ thu phóng trên trục x và y. Bạn cũng có thể định nghĩa tỷ lệ thu phóng trên trục z.

Giá trị thu phóng có thể là một giá trị, hai giá trị hoặc ba giá trị.
Nếu cung cấp một giá trị, tỷ lệ thu phóng của phần tử trên trục x và y sẽ bằng nhau.
Nếu cung cấp hai giá trị, phần tử sẽ thu phóng theo tỷ lệ chỉ định trên trục x và y.

Nếu cung cấp ba giá trị, phần tử sẽ thu phóng theo tỷ lệ chỉ định trên trục x, y và z. scale Để hiểu rõ hơnThuộc tính, xem thêm.

Hiển thịLưu ý: Hàm số scale() CSS một kỹ thuật khác để thu phóng phần tử là sử dụng thuộc tính scale Thuộc tính này có thể nói là một cách đơn giản và trực tiếp hơn để thu phóng phần tử. Xem thêm về thuộc tính CSS transform trên trang này

Mô hình

Ví dụ 1

Thay đổi kích thước của phần tử:

div {
  scale: 2;
}

Thử ngay

Ví dụ 2

Khi scale Khi thuộc tính được thiết lập với hai giá trị, kích thước sẽ được thiết lập trên trục x và y. Ở đây, kích thước của phần tử trên trục x sẽ tăng gấp đôi, trên trục y sẽ giảm còn một nửa:

div {
  scale: 2 50%;
}

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
x-axis	Định nghĩa tỷ lệ thu phóng trên trục x. Giá trị có thể là: Số Phần trăm
y-axis	Định nghĩa tỷ lệ thu phóng trên trục y. Giá trị có thể là: Số Phần trăm
z-axis	Định nghĩa tỷ lệ thu phóng trên trục z. Giá trị có thể là: Số Phần trăm
initial	Đặt tính chất này về giá trị mặc định. Xem thêm initial.
inherit	Kế thừa tính chất này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	none
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Tính chất liên quan đến animation.
Phiên bản:	CSS3
Ngữ pháp JavaScript:	object.style.scale="2 0.7"