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:
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:
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); |
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); |
Transform |
| transform: matrix(0.5, 0, 0, 1, 0, 0); -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 |
|
| transform: matrix(0.1, 0, 0, 1, 0, 0); -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 |
|
| transform: matrix(-0.5, 0, 0, 1, 0, 0); -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 |
|
| 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 |
|
| n2 | transform: matrix(1, -1.5, 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 |
| transform: matrix(1, -1, 0, 1, 0, 0); -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 |
|
| transform: matrix(1, -0.1, 0, 1, 0, 0); -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 |
|
| transform: matrix(1, 1, 0, 1, 0, 0); -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 |
|
| transform: matrix(1, 1.5, 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 |
|
| n3 | transform: matrix(1, 0, -1.5, 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 |
| transform: matrix(1, 0, -1, 1, 0, 0); -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 |
|
| transform: matrix(1, 0, -0.1, 1, 0, 0); -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 |
|
| transform: matrix(1, 0, 1, 1, 0, 0); -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 |
|
| transform: matrix(1, 0, 1.5, 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 |
|
| n4 | 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 |
| transform: matrix(1, 0, 0, 0.3, 0, 0); -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 |
|
| 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 |
|
| n5 | transform: matrix(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); |
Transform |
| transform: matrix(1, 0, 0, 1, -10, 0); -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); |
Transform |
|
| transform: matrix(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); |
Transform |
|
| n6 | transform: matrix(1, 0, 0, 1, 0, -55); -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); |
Transform |
| transform: matrix(1, 0, 0, 1, 0, -10); -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); |
Transform |
|
| transform: matrix(1, 0, 0, 1, 0, 55); -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); |
Transform |
|
| n1 n2 n3 n4 | transform: matrix(1, 1, -1, 1, 0, 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); |
Transform |
| transform: matrix(-1, 1, -1, -1, 0, 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); |
Transform |
|
| transform: matrix(-1, -1, 1, -1, 0, 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); |
Transform |
|
| transform: matrix(1, -1, 1, 1, 0, 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); |
Transform |