Hàm skew
Hàm skew xác định độ nghiêng của phần tử,
biến nó từ hình chữ nhật
thành hình bình hành. Được sử dụng cùng
với thuộc tính transform.
Giá trị của thuộc tính là một góc với bất kỳ đơn vị góc nào. Độ nghiêng được thực hiện xung quanh
điểm được xác định bởi thuộc tính transform-origin.
Có thể nhận một hoặc hai tham số, được liệt kê cách nhau bằng dấu phẩy. Nếu có hai tham số - tham số đầu tiên xác định độ nghiêng theo chiều ngang, và tham số thứ hai - theo chiều dọc. Nếu chỉ có một tham số - thì nó xác định độ nghiêng theo chiều ngang (không phải theo cả hai chiều). Các tham số có thể là số dương hoặc âm.
Cú pháp
bộ chọn {
transform: skew(một hoặc hai góc);
}
Ví dụ
Trong ví dụ này, khối được nghiêng 30
độ sang trái:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Trong ví dụ này, khối được nghiêng 30
độ sang phải:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Trong ví dụ này, khối được nghiêng 30
độ theo chiều dọc (giá trị dương):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Trong ví dụ này, khối được nghiêng 30
độ theo chiều dọc (giá trị âm):
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Ví dụ
Xác định độ nghiêng đồng thời theo cả trục X và Y:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
