Thuộc tính transform

Thuộc tính transform thiết lập các phép biến đổi cho phần tử, chẳng hạn như xoay, thay đổi tỷ lệ, nghiêng, dịch chuyển và các phép biến đổi khác. Các phép biến đổi tương ứng được viết cách nhau bởi dấu cách:

selector {
	transform: rotate(30deg) scale(3);
}

Ví dụ

Trong ví dụ này khối được xoay 30 độ theo chiều kim đồng hồ:

<div id="elem">lorem ipsum</div>

#elem {
	transform: rotate(30deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Ví dụ

Trong ví dụ này ngoài phép xoay còn được thêm vào phép nghiêng:

<div id="elem">lorem ipsum</div>

#elem {
	transform: rotate(30deg) skew(20deg);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Ví dụ

Trong ví dụ này ngoài phép xoay và nghiêng còn được thêm phép thay đổi tỷ lệ:

<div id="elem">lorem ipsum</div>

#elem {
	transform: rotate(30deg) skew(20deg) scale(2, 3);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}