Hàm skewY

Hàm skewY thiết lập độ nghiêng của phần tử theo trục Y, biến nó thành hình bình hành. Được sử dụng kết hợp với thuộc tính transform. Giá trị của thuộc tính là một góc trong bất kỳ đơn vị đo góc nào. Góc có thể dương hoặc âm. Giá trị dương làm nghiêng lên, giá trị âm - nghiêng xuống. Độ nghiêng được thực hiện xung quanh điểm được xác định bởi thuộc tính transform-origin.

Cú pháp

cssbộ chọn {
  transform: skewY(góc);
}

Ví dụ

Trong ví dụ này, khối được nghiêng lên 30 độ:

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

css#elem {
  transform: skewY(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Ví dụ

Trong ví dụ này, khối được nghiêng xuống 30 độ:

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

css#elem {
  transform: skewY(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

Xem thêm