Hàm scale
Hàm scale thu phóng phần tử:
làm lớn hơn hoặc nhỏ hơn nó nhiều
lần. Việc thu phóng được thực hiện xung quanh
điểm, được xác định bởi thuộc tính transform-origin.
Có thể nhận một hoặc hai tham số, liệt kê bằng dấu phẩy. Nếu có hai tham số - tham số đầu tiên xác định thu phóng theo chiều ngang, và tham số thứ hai - theo chiều dọc. Nếu chỉ có một tham số thì nó xác định thu phóng theo chiều ngang và chiều dọc đồng thời.
Giá trị của các tham số là số nguyên hoặc số thập phân.
Nếu nó lớn hơn 1 - phần tử được phóng to,
nếu nhỏ hơn (ví dụ: 0.5) - phần tử
thu nhỏ lại. Nếu đặt 1 - không có gì thay đổi
(đây chính là giá trị mặc định).
Cú pháp
bộ chọn {
transform: scale(một hoặc hai số);
}
Ví dụ
Khi di chuột qua khối, hãy tăng tỷ lệ lên 1.5
lần trên cả hai trục:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Ví dụ
Giảm tỷ lệ đi 2 lần trên cả hai trục:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Ví dụ
Tăng tỷ lệ lên 2 lần theo trục X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Ví dụ
Tăng tỷ lệ lên 2 lần theo trục Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
