CSS 3D Transforms

0
41
  • Với thuộc tính transform bạn có thể chuyển đổi phần tử 3D bằng các phương thức sau:
  • rotateX()
  • rotateY()
  • rotateZ()

Phương thức rotateX().

  • Phương thức rotateX() quay một phần tử xung quanh trục X của nó ở một mức độ nhất định:

Ví dụ:

Cú pháp:

#myDiv {
  transform: rotateX(150deg);
}

Phương thức rotateY().

  • Phương thức rotateY() quay một phần tử xung quanh trục Y của nó ở một mức độ nhất định:

Ví dụ:

Cú pháp:

#myDiv {
  transform: rotateY(150deg);
}

Phương thức rotateZ().

  • Phương thức rotateZ() quay một phần tử xung quanh trục Z của nó ở một mức độ nhất định:

Cú pháp:

Ví dụ:

Cú pháp:

#myDiv {
  transform: rotateZ(90deg);
}

CSS 3D Transform Methods( Bảng các phương thức ).

Phương thứcGiải thích
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Xác định phép biến đổi 3D, sử dụng ma trận 4×4 gồm 16 giá trị
translate3d(x,y,z)

Xác định dịch chuyển 3D

translateX(x)

Xác định dịch chuyển 3D, chỉ sử dụng giá trị cho trục X

translateY(y)Xác định dịch chuyển 3D, chỉ sử dụng giá trị cho trục Y
translateZ(z)Xác định dịch chuyển 3D, chỉ sử dụng giá trị cho trục Z
scale3d(x,y,z)Xác định tỷ lệ chuyển đổi 3D
scaleX(x)Xác định tỷ lệ chuyển đổi 3D theo trục X
scaleY(y)Xác định tỷ lệ chuyển đổi 3D theo trục Y
scaleZ(z)Xác định tỷ lệ chuyển đổi 3D theo trục Z
rotate3d(x,y,z,angle)Xác định góc quay 3D
rotateX(angle)Xác định góc quay 3D theo trục X
rotateY(angle)Xác định góc quay 3D theo trục Y
rotateZ(angle)Xác định góc quay 3D theo trục Z
perspective(n)Xác định chế độ xem với phần tử được biến đổi 3D

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây