Hàm CSS skewX()

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

Trong CSS skewX() Được sử dụng để nghiêng phần tử theo góc đã cho theo trục x.

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

Lưu ý:skewX(a) Tương đương với skew(a, 0)!

Mô hình

Ví dụ 1

Sử dụng skewX() Nghiêng một số thẻ <div> theo góc đã cho theo trục x:

#myDiv1 {
  transform: skewX(15deg);
}
#myDiv2 {
  transform: skewX(30deg);
}
#myDiv3 {
  transform: skewX(-25deg);
}

Thử ngay

Ví dụ 2

Sử dụng skewX() Nghiêng hình ảnh theo góc đã cho theo trục x:

#img1 {
  transform: skewX(25deg);
}
#img2 {
  transform: skewX(-25deg);
}
#img3 {
  transform: skewX(10deg);
}

Thử ngay

Cú pháp CSS

skewX(a)
Giá trị Mô tả
a Bắt buộc. Góc. Định nghĩa sự nghiêng theo trục x.

Chi tiết kỹ thuật

Phiên bản: Mô đun CSS Transforms Cấp 1

Hỗ trợ trình duyệt

Số liệu 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

Giáo trình:Chuyển đổi 2D CSS

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

Tham khảo:Hàm skew() trong CSS

Tham khảo:Hàm skewY() trong CSS