Hàm CSS scaleX()

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

CSS scaleX() Hàm được sử dụng để thu nhỏ ngang phần tử.

scaleX() Hàm tăng hoặc giảm chiều rộng của phần tử.

scaleX() Hàm trong transform sử dụng trong thuộc tính.

Mô hình

Ví dụ 1

Sử dụng scaleX() Thu nhỏ chiều rộng của nhiều thẻ <div>:

#myDiv1 {
  transform: scaleX(0.7);
}
#myDiv2 {
  transform: scaleX(90%);
}
#myDiv3 {
  transform: scaleX(1.1);
}

Thử ngay

Ví dụ 2

Sử dụng scaleX() Thu nhỏ chiều rộng của ảnh:

#img1 {
  transform: scaleX(0.6);
}
#img2 {
  transform: scaleX(90%);
}
#img3 {
  transform: scaleX(-0.6);
}
#img4 {
  transform: scaleX(1.1);
}

Thử ngay

Cú pháp CSS

scaleX(s)
Giá trị Mô tả
s Bắt buộc. Số chỉ định vector thu nhỏ chiều rộng.

Chi tiết kỹ thuật

Phiên bản: Mô đun CSS Transforms Level 1

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Trang liên quan

Hướng dẫn:Chuyển đổi 2D CSS

Tham khảo:Thuộc tính transform CSS

Tham khảo:Thuộc tính scale CSS

Tham khảo:Hàm số scale() CSS

Tham khảo:Hàm số scale3d() CSS

Tham khảo:Hàm số scaleY() CSS