skew()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Hàm skew() CSS function định nghĩa một phép biến đổi làm nghiêng một phần tử trên mặt phẳng
2D. Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: skew(0);
transform: skew(15deg, 15deg);
transform: skew(-0.06turn, 18deg);
transform: skew(0.312rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Phép biến đổi này là một ánh xạ cắt (transvection) làm biến dạng mỗi điểm trong phần tử theo một góc nhất định theo hướng ngang và dọc. Hiệu ứng như thể bạn kéo từng góc của phần tử theo một góc nhất định.
Tọa độ của mỗi điểm được thay đổi theo một giá trị tỉ lệ thuận với góc được chỉ định và khoảng cách đến gốc tọa độ. Do đó, điểm càng xa gốc tọa độ thì giá trị được thêm vào càng lớn.
Cú pháp
skew(ax)
skew(ax, ay)
Giá trị
ax-
Là một
<angle>biểu thị góc dùng để làm biến dạng phần tử dọc theo trục x. ayOptional-
Là một
<angle>biểu thị góc dùng để làm biến dạng phần tử dọc theo trục y. Nếu không được xác định, giá trị mặc định là0, dẫn đến chỉ làm nghiêng theo chiều ngang.
| Tọa độ Descartes trên ℝ^2 | Tọa độ thuần nhất trên ℝℙ^2 | Tọa độ Descartes trên ℝ^3 | Tọa độ thuần nhất trên ℝℙ^3 |
|---|---|---|---|
|
|
|
|
|
[1 tan(ay) tan(ax) 1 0 0] |
Cú pháp chính thức
<skew()> =
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
Ví dụ
Làm nghiêng chỉ theo trục x
HTML
<div>Bình thường</div>
<div class="skewed">Đã làm nghiêng</div>
CSS
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg); /* Equal to skewX(10deg) */
background-color: pink;
}
Kết quả
Làm nghiêng theo cả hai trục
HTML
<div>Bình thường</div>
<div class="skewed">Đã làm nghiêng</div>
CSS
body {
margin: 20px;
}
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg, 10deg);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-skew |