Hàm scaleY

Hàm scaleY thu phóng phần tử theo trục Y. 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. Giá trị của hàm là một số nguyên hoặc số thập phân. Nếu nó lớn hơn 1 - phần tử sẽ được phóng to, nếu nhỏ hơn (ví dụ: 0.5) - phần tử thu nhỏ. Nếu đặt là 1 - sẽ không có gì thay đổi (đây là giá trị mặc định).

Cú pháp

cssbộ chọn {
  transform: scaleY(số);
}

Ví dụ

Khi di chuột qua khối, hãy phóng to tỷ lệ lên 1.5 lần theo trục Y:

html<div id="elem">lorem ipsum</div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleY(1.5);
}

Результат:

Ví dụ

Khi di chuột qua khối, hãy thu nhỏ tỷ lệ xuống 2 lần theo trục Y:

html<div id="elem">lorem ipsum</div>
css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleY(0.5);
}

Результат:

Xem thêm

  • hàm scale,
    thiết lập tỷ lệ thu phóng theo cả hai trục X và Y
  • hàm scaleX,
    thiết lập tỷ lệ thu phóng theo trục X