Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
Trong bài viết này, bạn sẽ học cách sử dụng hàm CSS translateZ() . Theo nhiều cách, đây là một chức năng CSS độc đáo vì nó thách thức ý tưởng rằng trang web chỉ là một không gian trực quan 2D.
Thuộc tính biến đổi CSS có rất nhiều chức năng để di chuyển các HTMLElements xung quanh. Trong số đó có các hàm translateX , translateY và translateZ .
Trong khi translateX và translateY khá đơn giản, thì translateZ hơi khó hiểu hơn một chút.
Hãy xem lại cách translateX và translateY hoạt động:
div#myCircle { background-color: gray; width: 20px; height: 20px; border-radius: 100%; transform: translateX(11px) translateY(20px); } HTMLElement được di chuyển 11px sang bên phải và xuống 20px .
Nó di chuyển nó dọc theo trục x và trục y. Bạn có thể nhớ những thuật ngữ này từ các lớp Toán ở trường trung học! Đoán xem hàm translateZ di chuyển theo trục nào?
Đúng rồi! Trục z. Thay vì di chuyển HTMLE nông cụ theo chiều ngang / dọc, nó sẽ di chuyển chúng đến gần bạn hơn hoặc xa bạn hơn.
Sử dụng translateZ ()
Hãy thử thêm translateZ vào đoạn mã trước:
div#myCircle { background-color: gray; width: 20px; height: 20px; border-radius: 100%; transform: translateX(11px) translateY(20px) translateZ(75px) perspective(200px); } Bạn có thể đã nhận thấy một hàm CSS khác có tên là perspective() . Nó thực sự cần thiết để translateZ có hiệu lực. Đó là thông thường để quên nó vì không translateX hoặc translateY đòi hỏi nó ... Nhưng bạn gotta nhớ để sử dụng nó với translateZ !
Phối cảnh () làm gì?
Hàm phối cảnh () xác định khoảng cách ảo giữa mặt phẳng của màn hình máy tính của bạn và HTMLElement mà bạn đang áp dụng translateZ .
Điều này nghĩa là perspective(200px) và translateZ(75px) tạo ra một không gian ảo 200px giữa HTMLElement và màn hình máy tính, sau đó di chuyển nó 75px lại gần bạn hơn.
Điều này làm cho HTMLElement có vẻ lớn hơn 💗
Tương tự như vậy, việc sử dụng một giá trị âm trong translateZ() sẽ di chuyển nó ra xa hơn:
div#myCircle { background-color: gray; width: 20px; height: 20px; border-radius: 100%; transform: translateX(11px) translateY(20px) translateZ(-100px) perspective(200px); } 
Thời gian demo
Dưới đây là một bản demo nhỏ mà sử dụng translateZ chức năng CSS. Hãy thử di chuột qua các node !
button { /* abridged css values */ transform: perspective(100px) translateZ(0px); transition: transform 100ms linear; } button:hover { transform: perspective(100px) translateZ(5px); } Thật dễ dàng để tạo các hiệu ứng hình ảnh hấp dẫn bằng cách sử dụng translateZ !
Những thông tin thú vị về translateZ ()
Có một số hành vi không mong muốn với perspective và translateZ cần lưu ý.
- Nếu giá trị được cung cấp cho translateZ () bằng hoặc cao hơn giá trị được cung cấp cho phối cảnh (), thì nó sẽ khiến HTMLElement biến mất. Bạn luôn có thể đặt một giá trị nhỏ hơn vô hạn trong
translateZ()nhưng điều ngược lại không đúng… Khi bạn vượt quá giá trị củaperspective(), phần tử sẽ không còn hiển thị nữa. - Áp dụng phối cảnh (0px) . Mọi giá trị cho
perspective()sẽ hoạt động… trừ khi đó là giá trị 0 (như0px,0,0em). Điều này làm cho mọi hiệu ứngtranslateZ()bị bỏ qua.
Kết luận
Sử dụng translateZ là bước đệm để xem các trang web như một không gian trực quan 3D… không chỉ 2D! Hy vọng rằng bạn sẽ thêm nó vào hộp công cụ của bạn và nó sẽ giúp bạn tạo ra những thiết kế hấp dẫn!
Truy cập MDN để xem tài liệu về translateZ và perspective 📦🔍
Các tin liên quan
Cách hiển thị CSS trên server ứng dụng React2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
