Thuộc tính translate CSS

trang trước transition-timing-function
Trang tiếp theo unicode-bidi

Định nghĩa và cách sử dụng

translate Thuộc tính này cho phép bạn thay đổi vị trí của phần tử.

translate Thuộc tính này định nghĩa tọa độ trục x và y của phần tử trong không gian hai chiều. Bạn cũng có thể định nghĩa tọa độ trục z để thay đổi vị trí trong không gian ba chiều.

Tọa độ có thể chỉ cung cấp tọa độ trục x, hoặc tọa độ trục x và y, hoặc tọa độ trục x, y và z.

Để hiểu rõ hơn translate Thuộc tính, xin xemGiải thích.

Gợi ý:Để thuộc tính trục z hoạt động, bạn cần định nghĩa một giá trị cho thuộc tính CSS perspective.

Lưu ý:Một kỹ thuật dịch chuyển phần tử khác là sử dụng Hàm translate() CSS Thuộc tính CSS transform của trang này có thể nói là một phương pháp đơn giản và trực tiếp hơn để dịch chuyển phần tử.

Mô hình

Ví dụ 1

Thay đổi vị trí của phần tử:

div {
  translate: 100px 20px;
}

Thử ngay

Ví dụ 2

Khi đặt trục z translate thuộc tính này, chúng ta mới có thể thấy bất kỳ hiệu ứng nào: perspective Chỉ khi nào chúng ta đặt thuộc tính

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Thử ngay

Cú pháp CSS

translate: x-axis y-axis z-axis|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
x-axis	Định nghĩa vị trí trên trục x. Giá trị có thể là: Độ dài Phần trăm
y-axis	Định nghĩa vị trí trên trục y. Giá trị có thể là: Độ dài Phần trăm
z-axis	Định nghĩa vị trí trên trục z. Giá trị có thể là: Độ dài Phần trăm
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Gia công thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	none
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.translate="10px 20px"