Thuộc tính chuyển đổi CSS

CSS3 hỗ trợ thuộc tính biến đổi. Thuộc tính biến đổi giúp cho phép bạn có thể: translate, rotate, scale, và skews các thành phần.

Chuyển đổi là một hiệu ứng được sử dụng để thay đổi hình dạng, kích thước và vị trí các thành phần.
Có hai kiểu chuyển đổi, ví dụ như chuyển đổi 2D và 3D được hỗ trợ trong CSS3.

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:

Các trình duyệt hỗ trợ

Thuộc tính	Chrome	IE	Firefox	Opera	Safari
transform	36.04.0 -webkit-	10.09.0 -ms-	16.03.5 -moz-	23.0 15.0 -webkit- 12.1 10.5 -o-	9.03.2 -webkit-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.03.5 -moz-	9.03.2 -webkit-	23.0 15.0 -webkit- 12.110.5 -o-

Dưới đây là các ví dụ:

1. Quay 20 độ góc - rotate(20deg) trong CSS
Trong ví dụ sau, một hộp sẽ quay theo một góc 20 độ:

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

Xem ví dụ

2. Quay -20 độ góc - rotate(-20deg) trong CSS
Trong ví dụ sau, một hộp sẽ quay theo một góc -20 độ:

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

Xem ví dụ

3. Đố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:

<style>
 div {
	width: 300px;
	height: 100px;
	background-color: pink;
	border: 1px solid black;
 }
 div#skewDiv {
	/* IE 9 */
	-ms-transform: skewX(20deg); 
	
	/* Safari */
	-webkit-transform: skewX(20deg);
	
	/* Cu phap chuan */	
	transform: skewX(20deg);
 }
</style>

Xem ví dụ

4. Đố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:

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

Xem ví dụ

5. Matrix Transform trong CSS
Ví dụ sau minh họa cách sử dụng của Matrix Transfrom trong CSS:

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

Xem ví dụ

Ví dụ Matrix Transform theo một hướng khác:

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

Xem ví dụ