Thuộc tính transform trong CSS - Xoay, co dãn, bóp méo đối tượng

Đối với các Designer khi tiến hành xoay hoặc co giãn ảnh thường họ dùng các công cụ đồ họa như Photoshop, Firework,... để thực hiện, nhưng đối với CSS3 thì chúng ta thực hiện xoay đối tượng một cách hết sức đơn giản chỉ với một vài dòng CSS. Để minh chứng cho điều đó trong bài viết này tôi xin trình bày với các bạn cách xoay và co giãn một đối tượng ảnh bằng cách dùng các lệnh của CSS3.

Một số giá trị của thuộc tính transform:

rotate: xoay đối tượng
scale: co giãn đối tượng
skew: bóp méo đối tượng
translate: dịch chuyển đối tượng

Cấu trúc:

đối_tượng {
   transform: giá_trị; /* All */
   -ms-transform: giá_trị; /* Cho IE9 */
   -webkit-transform: giá_trị); /* Chrome và Safari */
   -moz-transform: giá_trị; /* Firefox */
   -o-transform: giá_trị; /* Opera */
}

1. Xoay đối tượng
1.1. Xoay 2D
Để xoay một đối tượng nào đó chúng ta dùng thuộc tính transform với giá trị rotate(góc xoay). Giá trị của góc xoay bạn có thể dùng đơn vị là deg (độ) và rad (radian).
Ví dụ ban đầu chúng ta có một đối tượng ảnh như sau:

Sau khi thêm style vào cho đối tượng

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);" />

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:rotate(2rad);-moz-transform:rotate(2rad);-webkit-transform:rotate(2rad);-ms-transform:rotate(2rad);-o-transform:rotate(2rad);" />

1.2. Xoay 3D

Các giá trị:
rotateX(angle): Định nghĩa một phép quay 3D dọc theo trục X.
rotateY(angle): Định nghĩa một phép quay 3D dọc theo trục Y.
rotateZ(angle): Định nghĩa một phép quay 3D dọc theo trục Z.

2. Co giãn đối tượng:

Để co giãn đối tượng ta sử dụng thuộc tính transform với giá trị scale(tỷ_lệ_co_dãn). Thuộc tính này sẽ có hoặc giãn đỗi tượng tùy theo tỉ lệ .
 - scaleX(tỷ_lệ_co_dãn): co dãn theo chiều rộng
 - scaleY(tỷ_lệ_co_dãn): co dãn theo chiều cao.
Chúng ta cũng có thể viết gộp 2 trượng hợp này lại thành: scale(tỷ lệ theo chiều rộng, tỷ lệ theo chiều cao)

VÍ DỤ 1: Co đối tượng với tỉ lệ bằng 1/2

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:scale(0.5);-moz-transform:scale(0.5);-webkit-transform:scale(0.5);" />

VÍ DỤ 2: Phóng to đối tượng lên gấp 1,5 lần hiện tại.

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform: scale(1.5);" />

Ví dụ kéo ảnh dài gấp 2 lần theo chiều rộng

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:scale(2,1);-moz-transform:scale(2,1);-webkit-transform:scale(2,1);" />

3. Bóp méo đối tượng

Để bóp méo đối tượng chúng ta có thuộc tính transform với giá trị skew(góc), tùy theo góc bóp méo mà đối tượng sẽ bị lệch về bên trái hay bên phải.

VÍ DỤ 1: Bóp méo đối tượng với hệ số góc âm.

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:skew(-45deg);-moz-transform:skew(-45deg);-webkit-transform:skew(-45deg);" />

VÍ DỤ 2: Bóp méo đối tượng với hệ số góc dương.

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" alt="Rotate" style="transform:skew(45deg);-moz-transform:skew(45deg);-webkit-transform:skew(45deg);" />

Bóp méo đối tượng với 2 giá trị

<img src="http://2.bp.blogspot.com/-1vaO7X17ngM/UXj4vFbhVGI/AAAAAAAAAG4/FipcW98xnr4/s1600/VN9_f2f8c.jpg" style="-moz-transform: skew(45deg,30deg); -webkit-transform: skew(45deg,30deg); transform: skew(45deg,30deg);" />

Thuộc tính transform trong CSS3 còn các giá trị thể hiện đối tượng trên không gian 3 chiều (3D). Các bạn hãy tìm hiểu thêm với bảng dưới đây nhé.

Nâng cao: Thuộc tính của transform trong CSS3:

Thuộc tính	giá trị	Mô tả
transform	none	Xác định rằng không có chuyển đổi
	matrix(n,n,n,n,n,n)	Đị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ị
	matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Định nghĩa một biến đổi 3D, bằng cách sử dụng một ma trận 4x4 với 16 giá trị
	perspective(n)	Định nghĩa một biến đổi 3D dưới dạng phối cảnh.
	rotate(góc)	Định nghĩa một phép quay 2D với góc được xác định bởi tham số.
	rotate3d(x,y,z,angle)	Định nghĩa một phép quay 3D được xác định bởi các tham số.
	rotateX(angle)	Định nghĩa một phép quay 3D dọc theo trục X.
	rotateY(angle)	Định nghĩa một phép quay 3D dọc theo trục Y.
	rotateZ(angle)	Định nghĩa một phép quay 3D dọc theo trục Z.
	scale(x,y)	Xác định một biến đổi tỷ lệ, 2D.
	scale3d(x,y,z)	Xác định một biến đổi tỷ lệ, 3D.
	scaleX(x)	Xác định một biến đổi tỷ lệ theo trục X.
	scaleY(y)	Xác định một biến đổi tỷ lệ theo trục Y.
	scaleZ(z)	Xác định một biến đổi tỷ lệ theo trục Z.
	skew(x-angle,y-angle)	Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.
	skewX(angle)	Xác định sự biến đổi nghiêng 2D dọc theo trục X.
	skewY(angle)	Xác định sự biến đổi nghiêng 2D dọc theo trục Y.
	translate(x,y)	Xác định một dịch chuyển 2D.
	translate3d(x,y,z)	Xác định một dịch chuyển 3D.
	translateX(x)	Xác định một dịch chuyển 2D theo trục X.
	translateY(y)	Xác định một dịch chuyển 2D theo trục Y.
	translateZ(z)	Xác định một dịch chuyển 2D theo trục Z.
transform-origin	Giá trị trục X	Xác định nơi nhìn thấy được đặt tại trục X, giá trị có thể: left, right, center, chiều dài, %.
	Giá trị trục Y	Xác định nơi nhìn thấy được đặt tại trục Y, giá trị có thể: left, right, center, chiều dài, %.
	Giá trị trục Z	Xác định nơi nhìn thấy được đặt tại trục Z, giá trị có thể: chiều dài.
transform-style	preserve-3d	Các thành phần bên trong sẽ giữ vị trí 3D của nó.
	flat	Các thành phần bên trong sẽ không giữ vị trí 3D của nó.