matrix()
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 matrix() CSS function định nghĩa ma trận biến đổi 2D thuần nhất. Kết quả của nó là kiểu dữ liệu <transform-function>.
Note:
Hàm matrix(a, b, c, d, tx, ty) là dạng viết tắt của matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
Try it
transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);
transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);
transform: matrix(0, 1, 1, 0, 0, 0);
transform: matrix(0.1, 1, -0.3, 1, 0, 0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Cú pháp
matrix(a, b, c, d, tx, ty)
Giá trị
Hàm matrix() được chỉ định với sáu giá trị. Các giá trị hằng được ngầm hiểu và không cần truyền vào dưới dạng tham số; các tham số còn lại được mô tả theo thứ tự cột chính.
- a b c d
-
Là các
<number>mô tả phép biến đổi tuyến tính. - tx ty
-
Là các
<number>mô tả phép tịnh tiến cần áp dụng.
| 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 |
|---|---|---|---|
|
|
|
|
|
[a b c d tx ty] |
Các giá trị biểu diễn các hàm sau:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
Cú pháp chính thức
<matrix()> =
matrix( <number>#{6} )
Ví dụ
HTML
<div>Bình thường</div>
<div class="changed">Đã thay đổi</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.changed {
transform: matrix(1, 2, -1, 1, 80, 80);
background-color: pink;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-matrix |
Khả năng tương thích trình duyệt
Xem thêm
transform- Các thuộc tính biến đổi riêng lẻ:
<transform-function>matrix3d()