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ị.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 14/05/2016
• Tổng lược xem trang: 163 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Thuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng,... Có thể dùng số âm. CSS viết:

p {
background: #cc0000;
height: 50px;
width: 80px;
transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
}

HTML viết:

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);
}

Giá trị matrix (n1). CSS viết:

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);

Giá trị matrix (n2). CSS viết:

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);

Giá trị matrix (n3). CSS viết:

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);

Giá trị matrix (n4). CSS viết:

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);

Giá trị matrix (n5). CSS viết:

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);

Giá trị matrix (n6). CSS viết:

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);

Giá trị matrix kết hợp (n1, n2, n3, n4). CSS viết:

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);

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt