CSS transform

transform ₃

---

Áp dụng một chuyển đổi 2D hoặc 3D một phần tử

Thuộc tính	giá trị	Ví dụ	Mô tả
transform	none	Ví dụ	không có chuyển đổi
	matrix(n,n,n,n,n,n)	Ví dụ	Đị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ị
	translate(x,y)	Ví dụ	Dịch chuyển đối tượng đến vị trí mới theo đọa độ x,y
	translate3d(x,y,z)
	translateX(x)	Ví dụ	Dịch chuyển đối tượng đến vị trí mới theo đọa độ x,0
	translateY(y)	Ví dụ	Dịch chuyển đối tượng đến vị trí mới theo đọa độ 0,y
	translateZ(z)
	scale(x,y)	Ví dụ	Phóng to thu nhỏ đối tượng theo tỷ lệ: gấp x lần giá trị width, y lần giá trị height
	scale3d(x,y,z)
	scaleX(x)	Ví dụ	Phóng to thu nhỏ đối tượng theo tỷ lệ: gấp x lần giá trị width, 1 lần giá trị height
	scaleY(y)	Ví dụ	Phóng to thu nhỏ đối tượng theo tỷ lệ: gấp 1 lần giá trị width, y lần giá trị height
	scaleZ(z)
	rotate(angle)	Ví dụ	Xoay đối tượng quanh tâm của nó với góc (angle) cho trước
	rotate3d(x,y,z,angle)
	rotateX(angle)	Ví dụ	Xoay đối tượng quanh tâm của nó theo phương trước sau ( trục x)
	rotateY(angle)	Ví dụ	Xoay đối tượng quanh tâm của nó theo phương trái phải ( trục y)
	rotateZ(angle)	Ví dụ	Xoay đối tượng quanh tâm của nó theo trục z
	skew(x-angle,y-angle)	Ví dụ	Nghiêng đối tượng theo trục tọa độ x,y
	skewX(angle)	Ví dụ	Nghiêng đối tượng theo trục tọa độ x
	skewY(angle)	Ví dụ	Nghiêng đối tượng theo trục tọa độ y
	perspective(n)		Định nghĩa một biến đổi 3D dưới dạng phối cảnh

Xem ví dụ

<style>
#bendoi_vn
{
width:200px;
height:100px;
background-color:yellow;
transform:rotate(10deg);
-ms-transform:rotate(10deg); /* Internet Explorer */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}
</style>

<div id="bendoi_vn">Bendoi.vn</div>

Bendoi.vn

Sự tương thích ( Cập nhật / Báo lỗi )

---