Thuộc tính dịch CSS
Định nghĩa và cách sử dụng
Thuộc tính translate
cho phép bạn thay đổi vị trí của các phần tử.
Thuộc tính translate
xác định tọa độ x và y của một phần tử trong 2D. Bạn cũng có thể xác định tọa độ z để thay đổi vị trí trong 3D.
Tọa độ chỉ có thể được cung cấp dưới dạng tọa độ x, tọa độ x và y hoặc tọa độ x, y và z.
Để hiểu rõ hơn về thuộc tính translate
, hãy xem bản demo .
Mẹo: Bạn cần xác định giá trị cho thuộc tính perspective
CSS để thuộc tính z có hiệu lực.
Lưu ý: Một kỹ thuật thay thế để dịch một phần tử là sử dụng thuộc tính CSS transform
với hàm CSS translate()
. Thuộc tính translate
CSS, như được giải thích trên trang web này, được cho là cách đơn giản và trực tiếp hơn để dịch một phần tử.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.translate="10px 20px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
translate | 104 | 104 | 72 | 14.1 | 90 |
Cú pháp CSS
translate: x-axis y-axis z-axis |initial|inherit;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
x-axis | Defines position at the x-axis. Possible values:
|
Demo ❯ |
y-axis | Defines position at the y-axis. Possible values:
|
Demo ❯ |
z-axis | Defines position at the z-axis. Possible values:
|
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Khi thuộc tính translate
cho trục z được đặt, thuộc tính perspective
cũng phải được đặt trên phần tử cha trước khi chúng ta có thể thấy bất kỳ hiệu ứng nào:
DIV1 {
perspective: 200px;
}
DIV2 {
translate: 50px 50px 50px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Biến đổi CSS 2D
Hướng dẫn CSS: Biến đổi CSS 3D
Thuộc tính tỷ lệ CSS: Thuộc tính tỷ lệ CSS
Thuộc tính xoay CSS: Thuộc tính Xoay CSS
Thuộc tính phối cảnh CSS: Thuộc tính phối cảnh CSS