CSS3 transforms cho phép chúng ta di chuyển (translate), quay (rotate), co-dãn (scale), hay nghiêng (skew) các phần tử. Có hai hình thức transform trong CSS3 là:

  • 2D transform
  • 3D transform

2D transform

Với 2D transform, CSS3 cung cấp hai thuộc tính là transform và transform-origin (cho phép thay đổi vị trí) với sự hỗ trợ của các trình duyệt như sau:

  Chrome IE/Edge Firefox Safari Opera
transform 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
12.1
10.5 -o-

Các trình duyệt có sử dụng tiền tố (prefix) như –webkit-,-ms-,  -moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính transform có 4.0-webkit- nghĩa là kể từ phiên bản Chrome 4.0 sử dụng  –webkit-transform.

Trong 2D transform, khi sử dụng thuộc tính transform phải đi kèm các phương thức:

Phương thức Mô tả
translate Di chuyển một phần tử từ vị trí hiện tại.
rotate Quay một phần tử theo chiều kim đồng hồ hay ngược chiều kim đồng hồ một góc cho trước.
skewX Nghiêng một phần tử một góc cho trước theo trục X.
skewY Nghiêng một phần tử một góc cho trước theo trục Y.
matrix Kết hợp các phương thức thành một.

( Tham khảo cách sử dụng và các ví dụ về 2D transform tại https://www.w3schools.com/css/css3_2dtransforms.asp )

3D transform

Với 3D transform, CSS3 cung cấp các thuộc tính cơ bản là transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility. Trình duyệt hỗ trợ như sau:

  Chrome IE/Edge Firefox Safari Opera
transform 36.0 +
12.0 -webkit-		 10.0+ 16.0+
10.0 -moz-		 9.0 +
4.0 -webkit-		 23.0 +
15.0 -webkit-
transform-origin 36.0 +
12.0 -webkit-		 10.0+ 16.0+
10.0 -moz-		 9.0 +
4.0 -webkit-		 23.0+
15.0 -webkit-
transform-style 36.0+
12.0 -webkit-		 11.0+ 16.0+
10.0 -moz-		 9.0+

4.0 -webkit-

 23.0+
15.0 -webkit-
perspective 36.0+
12.0 -webkit-		 10.0+ 16.0+
10.0 -moz-		 9.0+
4.0 -webkit-		 23.0+
15.0 -webkit
perspective-origin 36.0+
12.0 -webkit-		 10.0+ 16.0+
10.0 -moz-		 9.0+
4.0 -webkit-		 23.0+
15.0 -we
backface-visibility 36.0+
12.0 -webkit-		 10.0+ 16.0+
10.0 -moz-		 9.0+
4.0 -webkit-		 23.0+
15.0 -webkit-

Các trình duyệt có sử dụng tiền tố (prefix) như –webkit-,  -moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính transform có 12.0-webkit- nghĩa là kể từ phiên bản Chrome 12.0 sử dụng  –webkit–transform.

Trong 3D transform, khi sử dụng các thuộc tính thường đi kèm các phương thức.

(Tham khảo thêm về các thuộc tính và phương thức trong 3D transform tại https://www.w3schools.com/css/css3_3dtransforms.asp )

Học HTML & CSS >