2D Transforms được sử dụng để tái thay đổi cấu trúc phần tử, ví dụ như translate, rotate, scale, và skew.
Bảng dưới liệt kê một số giá trị thường được sử dụng trong 2D Transforms:
| Giá trị | Miêu tả |
|---|---|
| matrix(n,n,n,n,n,n) | Được sử dụng để định nghĩa Matrix Transforms (dạng tịnh tiến theo ma trận) với 6 giá trị |
| translate(x,y) | Được sử dụng để tịnh tiến phần tử theo trục x và trục y |
| translateX(n) | Được sử dụng để tịnh tiến phần tử theo trục x |
| translateY(n) | Được sử dụng để tịnh tiến phần tử theo trục y |
| scale(x,y) | Được sử dụng để thay đổi độ rộng và chiều cao của phần tử |
| scaleX(n) | Được sử dụng để thay đổi độ rộng của phần tử |
| scaleY(n) | Được sử dụng để thay đổi chiều cao của phần tử |
| rotate(angle) | Được sử dụng để quay phần tử dựa trên một góc (angle) |
| skewX(angle) | Được sử dụng để định nghĩa Skew Transforms (dạng tịnh tiến đối xứng lệch) cùng với trục x |
| skewY(angle) | Được sử dụng để định nghĩa Skew Transforms cùng với trục y |
Dưới đây là các ví dụ minh họa cách sử dụng của các thuộc tính trên.
Quay 20 độ góc - rotate(20deg) trong CSS
Trong ví dụ sau, một hộp sẽ quay theo một góc 20 độ:
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(20deg); /* Safari */ -webkit-transform: rotate(20deg); /* Cu phap chuan */ transform: rotate(20deg); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="myDiv"> Vi du 2D Transform trong CSS </div> </body> </html>
Kết quả là:
Quay -20 độ góc - rotate(-20deg) trong CSS
Quay -20 độ góc - rotate(-20deg) trong CSS
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv { /* IE 9 */ -ms-transform: rotate(-20deg); /* Safari */ -webkit-transform: rotate(-20deg); /* Cu phap chuan */ transform: rotate(-20deg); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="myDiv"> Vi du 2D Transform trong CSS </div> </body> </html>
Kết quả là:
Đối xứng lệch theo trục x – skewX(20deg) trong CSS
Trong ví dụ sau, một hộp sẽ đối xứng lệch theo trục x:
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Cu phap chuan */ transform: skewY(20deg); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="skewDiv"> Vi du 2D Transform trong CSS </div> </body> </html>
Đối xứng lệch theo trục y – skewY(20deg) trong CSS
Trong ví dụ sau, một hộp sẽ đối xứng lệch theo trục x:
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#skewDiv { /* IE 9 */ -ms-transform: skewY(20deg); /* Safari */ -webkit-transform: skewY(20deg); /* Cu phap chuan */ transform: skewY(20deg); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="skewDiv"> Vi du 2D Transform trong CSS </div> </body> </html>
Matrix Transform trong CSS
Ví dụ sau minh họa cách sử dụng của Matrix Transfrom trong CSS
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv1 { /* IE 9 */ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Cu phap chuan */ transform: matrix(1, -0.3, 0, 1, 0, 0); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="myDiv1"> Vi du 2D Transform trong CSS </div> </body> </html>
Ví dụ Matrix Transform theo một hướng khác:
<html> <head> <style> div { width: 300px; height: 100px; background-color: pink; border: 1px solid black; } div#myDiv2 { /* IE 9 */ -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */ -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Cu phap chuan */ transform: matrix(1, 0, 0.5, 1, 150, 0); } </style> </head> <body> <div> Vi du 2D Transform trong CSS. </div> <div id="myDiv2"> Vi du 2D Transform trong CSS </div> </body> </html>
