CSS - Tính năng Translate: Di chuyển các phần tử với phong cách

Xin chào các nhà pháp sư CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của CSS transforms, cụ thể là tập trung vào thuộc tính translate. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn qua thế giới kỳ diệu này, nơi chúng ta có thể di chuyển các phần tử trên trang web của mình mà không cần đổ mồ hôi. Vậy, hãy thắt dây an toàn và cùng nhau lặn vào!

Tính năng CSS Translate là gì?

Trước khi chúng ta bắt đầu di chuyển mọi thứ, hãy hiểu rõ thuộc tính translate thực sự làm gì. Nói đơn giản, nó cho phép chúng ta di chuyển một phần tử từ vị trí hiện tại của nó mà không ảnh hưởng đến布局 của các phần tử khác. Nó giống như có một cây phép thuật có thể nâng và di chuyển các phần tử trên trang web của bạn!

So sánh với thế giới thực

Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Thuộc tính translate giống như việc bạn lift một chiếc ghế và di chuyển nó đến một vị trí khác mà không làm rối loạn bất kỳ thứ gì khác. Đ Cooler, phải không?

Giá trị có thể có

Thuộc tính translate có thể chấp nhận nhiều loại giá trị khác nhau. Hãy cùng phân tích chúng:

Loại Giá Trị	Mô Tả	Ví Dụ
Độ Dài	Các đơn vị cụ thể như px, em, rem	translate(50px, 20px)
Phần Trăm	Tương đối với kích thước của phần tử	translate(50%, 20%)
Từ Khóa	Các giá trị đặc biệt như none	translate(none)

Áp Dụng Cho

Thuộc tính translate có thể được áp dụng cho bất kỳ phần tử nào có thể được transform. Điều này bao gồm hầu hết các phần tử HTML, nhưng nó đặc biệt hữu ích cho:

• <div> containers
• Ảnh (<img>)
• Nút (<button>)
• Phần tử văn bản (<p>, <span>, v.v.)

Cú pháp DOM

Khi làm việc với JavaScript, bạn có thể cần truy cập hoặc thay đổi thuộc tính translate. Dưới đây là cách bạn có thể làm điều đó:

// Lấy giá trị translate
let currentTranslate = element.style.translate;

// Đặt giá trị translate
element.style.translate = "50px 20px";

Bây giờ, hãy cùng xem một số ví dụ thực tế!

CSS Translate - Không có Translation

Đôi khi, bạn có thể muốn明确规定 rằng một phần tử không nên được dịch chuyển. Dưới đây là cách bạn làm điều đó:

.no-move {
translate: none;
}

Điều này giống như nói với phần tử của bạn, "Nằm im, bạn! Không được di chuyển."

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục X

Hãy bắt đầu với một di chuyển đơn giản theo chiều horinzontal:

.move-right {
translate: 100px;
}

Điều này sẽ di chuyển phần tử của bạn 100 pixel sang phải. Nó giống như đẩy phần tử của bạn một chút và nói, "Di chuyển qua một chút, được không?"

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục Y

Bây giờ, hãy di chuyển lên và xuống:

.move-down {
translate: 0 50px;
}

Điều này sẽ di chuyển phần tử của bạn 50 pixel xuống. Giá trị đầu tiên (0) có nghĩa là không có di chuyển theo chiều horinzontal, và giá trị thứ hai (50px) có nghĩa là 50 pixel xuống.

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục Z

Việc di chuyển trong 3D thực sự trở nên thú vị! Dưới đây là cách bạn có thể di chuyển một phần tử "gần hơn" hoặc "xa hơn" từ người xem:

.move-closer {
translate: 0 0 -50px;
}

Điều này sẽ di chuyển phần tử 50 pixel gần hơn với người xem. Nó giống như phần tử đang nhô ra khỏi màn hình!

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục X và Y

Hãy kết hợp di chuyển horinzontal và vertial:

.move-diagonally {
translate: 100px 100px;
}

Điều này sẽ di chuyển phần tử của bạn 100 pixel sang phải và 100 pixel xuống. Nó giống như nói với phần tử của bạn, "Đi đến góc!"

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục Y và Z

Di chuyển theo chiều vertial và sâu hơn:

.float-down {
translate: 0 50px 20px;
}

Điều này sẽ di chuyển phần tử 50 pixel xuống và 20 pixel xa hơn từ người xem. Nó tạo ra một hiệu ứng 3D tinh tế!

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục X và Z

Hãy kết hợp di chuyển horinzontal và sâu hơn:

.slide-away {
translate: 100px 0 50px;
}

Điều này sẽ di chuyển phần tử 100 pixel sang phải và 50 pixel xa hơn từ người xem. Nó giống như phần tử đang trượt ra khỏi bên và vào xa hơn.

CSS Translate - Sử dụng Độ Dài-Phần Trăm cho Translate trên trục X, Y và Z

Cuối cùng, hãy di chuyển trong tất cả ba chiều:

.move-everywhere {
translate: 100px 50px 25px;
}

Điều này sẽ di chuyển phần tử của bạn 100 pixel sang phải, 50 pixel xuống và 25 pixel xa hơn từ người xem. Nó giống như cho phần tử của bạn tự do di chuyển trong không gian 3D!

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới kỳ diệu của CSS translations. Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn. Sử dụng các dịch chuyển này một cách khôn ngoan để tạo ra các trang web hấp dẫn và động.

Trước khi tôi để bạn đi, đây là một lời khuyên từ giáo viên máy tính hàng xóm của bạn: Luôn kiểm tra các dịch chuyển của bạn trên các thiết bị và trình duyệt khác nhau. Điều gì看起来完美 trên máy tính của bạn có thể看起来有点不对劲 trên điện thoại của ai đó.

Bây giờ, hãy tiếp tục dịch chuyển các phần tử web của bạn đến những đỉnh cao (và rộng, và sâu)! Chúc các bạn may mắn với việc mã hóa!

Credits: Image by storyset