Hướng dẫn transform: matrix trong css - biến đổi: ma trận trong css

Trang chủ
Tham khảo
CSS
CSS3
Ví dụ về thuộc tính transform

Thuộc tính transform với giá trị matrix(n1,n2,n3,n4,n5,n6)

Thuộc tính transform với giá trị matrix(n1,n2,n3,n4,n5,n6): Định nghĩa một biến đổi 2D, bằng cách sử dụng một ma trận với 6 giá trị.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
}

Hiển thị trình duyệt khi chưa có transform:

Thêm thuộc tính transform: matrix(n,n,n,n,n,n), CSS viết:

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: matrix(1, -1, 1, 0, 0, 0);
    -moz-transform: matrix(1, -1, 1, 0, 0, 0);
    -webkit-transform: matrix(1, -1, 1, 0, 0, 0);
    -o-transform: matrix((1, -1, 1, 0, 0, 0);
    -ms-transform: matrix(1, -1, 1, 0, 0, 0);
}

Hiển thị trình duyệt khi có transform:

Giá trị matrix(n1,n2,n3,n4,n5,n6)

Giá trị	Ví dụ	Hiển thị
Bình thường	transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0);	Transform
n1	transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(2, 0, 0, 1, 0, 0); -webkit-transform: matrix(2, 0, 0, 1, 0, 0); -o-transform: matrix(2, 0, 0, 1, 0, 0); -ms-transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(2, 0, 0, 1, 0, 0); -webkit-transform: matrix(2, 0, 0, 1, 0, 0); -o-transform: matrix(2, 0, 0, 1, 0, 0); -ms-transform: matrix(2, 0, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(0.5, 0, 0, 1, 0, 0); -webkit-transform: matrix(0.5, 0, 0, 1, 0, 0); -o-transform: matrix(0.5, 0, 0, 1, 0, 0); -ms-transform: matrix(0.5, 0, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(0.1, 0, 0, 1, 0, 0); -webkit-transform: matrix(0.1, 0, 0, 1, 0, 0); -o-transform: matrix(0.1, 0, 0, 1, 0, 0); -ms-transform: matrix(0.1, 0, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(-0.5, 0, 0, 1, 0, 0); -webkit-transform: matrix(-0.5, 0, 0, 1, 0, 0); -o-transform: matrix(-0.5, 0, 0, 1, 0, 0); -ms-transform: matrix(-0.5, 0, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(-2, 0, 0, 1, 0, 0); -webkit-transform: matrix(-2, 0, 0, 1, 0, 0); -o-transform: matrix(-2, 0, 0, 1, 0, 0); -ms-transform: matrix(-2, 0, 0, 1, 0, 0);	Transform
n1	transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(2, 0, 0, 1, 0, 0); -webkit-transform: matrix(2, 0, 0, 1, 0, 0); -o-transform: matrix(2, 0, 0, 1, 0, 0); -ms-transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(1, -1.5, 0, 1, 0, 0); -webkit-transform: matrix(1, -1.5, 0, 1, 0, 0); -o-transform: matrix(1, -1.5, 0, 1, 0, 0); -ms-transform: matrix(1, -1.5, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, -1, 0, 1, 0, 0); -webkit-transform: matrix(1, -1, 0, 1, 0, 0); -o-transform: matrix(1, -1, 0, 1, 0, 0); -ms-transform: matrix(1, -1, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0); -o-transform: matrix(1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 1, 0, 1, 0, 0); -webkit-transform: matrix(1, 1, 0, 1, 0, 0); -o-transform: matrix(1, 1, 0, 1, 0, 0); -ms-transform: matrix(1, 1, 0, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 1.5, 0, 1, 0, 0); -webkit-transform: matrix(1, 1.5, 0, 1, 0, 0); -o-transform: matrix(1, 1.5, 0, 1, 0, 0); -ms-transform: matrix(1, 1.5, 0, 1, 0, 0);	Transform
n1	transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(2, 0, 0, 1, 0, 0); -webkit-transform: matrix(2, 0, 0, 1, 0, 0); -o-transform: matrix(2, 0, 0, 1, 0, 0); -ms-transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, -1.5, 1, 0, 0); -webkit-transform: matrix(1, 0, -1.5, 1, 0, 0); -o-transform: matrix(1, 0, -1.5, 1, 0, 0); -ms-transform: matrix(1, 0, -1.5, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 0, -1, 1, 0, 0); -webkit-transform: matrix(1, 0, -1, 1, 0, 0); -o-transform: matrix(1, 0, -1, 1, 0, 0); -ms-transform: matrix(1, 0, -1, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 0, -0.1, 1, 0, 0); -webkit-transform: matrix(1, 0, -0.1, 1, 0, 0); -o-transform: matrix(1, 0, -0.1, 1, 0, 0); -ms-transform: matrix(1, 0, -0.1, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 0, 1, 1, 0, 0); -webkit-transform: matrix(1, 0, 1, 1, 0, 0); -o-transform: matrix(1, 0, 1, 1, 0, 0); -ms-transform: matrix(1, 0, 1, 1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 0, 1.5, 1, 0, 0); -webkit-transform: matrix(1, 0, 1.5, 1, 0, 0); -o-transform: matrix(1, 0, 1.5, 1, 0, 0); -ms-transform: matrix(1, 0, 1.5, 1, 0, 0);	Transform
n1	transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(2, 0, 0, 1, 0, 0); -webkit-transform: matrix(2, 0, 0, 1, 0, 0); -o-transform: matrix(2, 0, 0, 1, 0, 0); -ms-transform: matrix(2, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, -1, 0, 0); -webkit-transform: matrix(1, 0, 0, -1, 0, 0); -o-transform: matrix(1, 0, 0, -1, 0, 0); -ms-transform: matrix(1, 0, 0, -1, 0, 0);	Transform
n1 -moz-transform: matrix(1, 0, 0, 0.3, 0, 0); -webkit-transform: matrix(1, 0, 0, 0.3, 0, 0); -o-transform: matrix(1, 0, 0, 0.3, 0, 0); -ms-transform: matrix(1, 0, 0, 0.3, 0, 0);	Transform
biến đổi: ma trận (1, 0, 0, 1, 0, 0); -moz-chuyển đổi: ma trận (1, 0, 0, 1, 0, 0); -WebKit-Transform: Ma trận (1, 0, 0, 1, 0, 0); -o-transform: ma trận (1, 0, 0, 1, 0, 0); -ms-transform: ma trận (1, 0, 0, 1, 0, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0);	Biến đổi
n5	biến đổi: ma trận (1, 0, 0, 1, -55, 0); -moz -chuyển đổi: ma trận (1, 0, 0, 1, -55, 0); -WebKit -Transform: Ma trận (1, 0, 0, 1, -55, 0); -o -transform: ma trận (1, 0, 0, 1, -55, 0); -ms -transform: ma trận (1, 0, 0, 1, -55, 0); -moz-transform: matrix(1, 0, 0, 1, -55, 0); -webkit-transform: matrix(1, 0, 0, 1, -55, 0); -o-transform: matrix(1, 0, 0, 1, -55, 0); -ms-transform: matrix(1, 0, 0, 1, -55, 0);	Biến đổi
n5 -moz-transform: matrix(1, 0, 0, 1, -10, 0); -webkit-transform: matrix(1, 0, 0, 1, -10, 0); -o-transform: matrix(1, 0, 0, 1, -10, 0); -ms-transform: matrix(1, 0, 0, 1, -10, 0);	Biến đổi
n5 -moz-transform: matrix(1, 0, 0, 1, 55, 0); -webkit-transform: matrix(1, 0, 0, 1, 55, 0); -o-transform: matrix(1, 0, 0, 1, 55, 0); -ms-transform: matrix(1, 0, 0, 1, 55, 0);	Biến đổi
n5	biến đổi: ma trận (1, 0, 0, 1, -55, 0); -moz -chuyển đổi: ma trận (1, 0, 0, 1, -55, 0); -WebKit -Transform: Ma trận (1, 0, 0, 1, -55, 0); -o -transform: ma trận (1, 0, 0, 1, -55, 0); -ms -transform: ma trận (1, 0, 0, 1, -55, 0); -moz-transform: matrix(1, 0, 0, 1, 0, -55); -webkit-transform: matrix(1, 0, 0, 1, 0, -55); -o-transform: matrix(1, 0, 0, 1, 0, -55; -ms-transform: matrix(1, 0, 0, 1, 0, -55);	Biến đổi
n5 -moz-transform: matrix(1, 0, 0, 1, 0, -10); -webkit-transform: matrix(1, 0, 0, 1, 0, -10); -o-transform: matrix(1, 0, 0, 1, 0, -10; -ms-transform: matrix(1, 0, 0, 1, 0, -10);	Biến đổi
biến đổi: ma trận (1, 0, 0, 1, -55, 0); -moz -chuyển đổi: ma trận (1, 0, 0, 1, -55, 0); -WebKit -Transform: Ma trận (1, 0, 0, 1, -55, 0); -o -transform: ma trận (1, 0, 0, 1, -55, 0); -ms -transform: ma trận (1, 0, 0, 1, -55, 0); -moz-transform: matrix(1, 0, 0, 1, 0, 55); -webkit-transform: matrix(1, 0, 0, 1, 0, 55); -o-transform: matrix(1, 0, 0, 1, 0, 55; -ms-transform: matrix(1, 0, 0, 1, 0, 55);	Biến đổi
biến đổi: ma trận (1, 0, 0, 1, -10, 0); -moz -chuyển đổi: ma trận (1, 0, 0, 1, -10, 0); -WebKit -Transform: Ma trận (1, 0, 0, 1, -10, 0); -o -transform: ma trận (1, 0, 0, 1, -10, 0); -ms -transform: ma trận (1, 0, 0, 1, -10, 0);	biến đổi: ma trận (1, 0, 0, 1, 55, 0); -moz-chuyển đổi: ma trận (1, 0, 0, 1, 55, 0); -WebKit-Transform: Ma trận (1, 0, 0, 1, 55, 0); -o-transform: ma trận (1, 0, 0, 1, 55, 0); -ms-transform: ma trận (1, 0, 0, 1, 55, 0); -moz-transform: matrix(1, 1, -1, 1, 0, 0); -webkit-transform: matrix(1, 1, -1, 1, 0, 0); -o-transform: matrix(1, 1, -1, 1, 0, 0); -ms-transform: matrix(1, 1, -1, 1, 0, 0);	Biến đổi
N6 -moz-transform: matrix(-1, 1, -1, -1, 0, 0); -webkit-transform: matrix(-1, 1, -1, -1, 0, 0); -o-transform: matrix(-1, 1, -1, -1, 0, 0); -ms-transform: matrix(-1, 1, -1, -1, 0, 0);	Biến đổi
biến đổi: ma trận (1, 0, 0, 1, 0, -55); -moz -chuyển đổi: ma trận (1, 0, 0, 1, 0, -55); -WebKit -Transform: Ma trận (1, 0, 0, 1, 0, -55); -o -transform: ma trận (1, 0, 0, 1, 0, -55; -ms -transform: ma trận (1, 0, 0, 1, 0, -55); -moz-transform: matrix(-1, -1, 1, -1, 0, 0); -webkit-transform: matrix(-1, -1, 1, -1, 0, 0); -o-transform: matrix(-1, -1, 1, -1, 0, 0); -ms-transform: matrix(-1, -1, 1, -1, 0, 0);	Biến đổi
biến đổi: ma trận (1, 0, 0, 1, 0, -10); -moz -chuyển đổi: ma trận (1, 0, 0, 1, 0, -10); -WebKit -Transform: Ma trận (1, 0, 0, 1, 0, -10); -o -transform: ma trận (1, 0, 0, 1, 0, -10; -ms -transform: ma trận (1, 0, 0, 1, 0, -10); -moz-transform: matrix(1, -1, 1, 1, 0, 0); -webkit-transform: matrix(1, -1, 1, 1, 0, 0); -o-transform: matrix(1, -1, 1, 1, 0, 0); -ms-transform: matrix(1, -1, 1, 1, 0, 0);	Biến đổi