Hàm scaleX

Hàm scaleX thu phóng phần tử theo trục X. 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ẽ phóng to, nếu nhỏ hơn (ví dụ, 0.5) - phần tử thu nhỏ. Nếu đặt 1 - sẽ không có gì thay đổi (đây là giá trị mặc định).

Cú pháp

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

Ví dụ

Khi di chuột qua khối, chúng ta sẽ phóng to tỷ lệ lên 1.5 lần theo trục X:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(1.5);
}

Результат:

Ví dụ

Khi di chuột qua khối, chúng ta sẽ thu nhỏ tỷ lệ đi 2 lần theo trục X:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(0.5);
}

Результат:

Xem thêm