skewX()
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 skewX() CSS function định nghĩa một phép biến đổi làm nghiêng một phần tử theo
hướng ngang trên mặt phẳng 2D. Kết quả của nó là kiểu dữ liệu <transform-function>.
Try it
transform: skewX(0);
transform: skewX(35deg);
transform: skewX(-0.06turn);
transform: skewX(0.352rad);
<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. Hoành độ (ngang, tọa độ x) 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.
Note:
skewX(a) tương đương với
skew(a).
Cú pháp
css
skewX(a)
Giá trị
| 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 0 tan(a) 1 0 0] |
Cú pháp chính thức
<skewX()> =
skewX( [ <angle> | <zero> ] )
Ví dụ
HTML
html
<div>Bình thường</div>
<div class="skewed">Đã làm nghiêng</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skewX(10deg); /* Equal to skew(10deg) */
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-skewx |
Khả năng tương thích trình duyệt
Xem thêm
transform<transform-function>- Các thuộc tính biến đổi riêng lẻ: