Giới thiệu
Trong một thời gian dài, 3D đã được coi là phương tiện ứng dụng trên máy tính để bàn. Gần đây, với sự ra đời của các điện thoại thông minh tiên tiến có khả năng tăng tốc GPU gốc, chúng tôi đã bắt đầu thấy 3D được sử dụng gần như ở mọi nơi.
Thông thường, 3D chủ yếu được dùng như một thiết bị để chơi trò chơi hoặc một số giao diện người dùng nâng cao. Mãi cho đến khi có sự ra đời của Phép biến đổi phối cảnh trong WPF và Silverlight, mô hình phù hợp để áp dụng hiệu ứng 3D cho các thành phần giao diện người dùng mới trở thành giải pháp thiết thực cho các nhà phát triển ứng dụng (sau khi cả 3D không thực sự dễ dàng).
Mô hình chuyển đổi CSS 3D được giới thiệu dưới dạng thông số kỹ thuật Bản nháp vào tháng 3 năm 2009 để cho phép các nhà phát triển web tạo giao diện người dùng thú vị và hấp dẫn tận dụng lợi thế của 3D bằng cách cho phép tác giả ứng dụng áp dụng các chuyển đổi phối cảnh 3D cho bất kỳ phần tử DOM trực quan nào.
Bản nháp hoạt động chuyển đổi CSS 3D là phần mở rộng hợp lý cho Mô hình chuyển đổi 2D của CSS, giới thiệu một số thuộc tính bổ sung, bao gồm: quan điểm, phép xoay và biến đổi trong không gian 3D.
Chưa bao giờ chúng tôi có thể xây dựng giao diện 3D dễ dàng đến vậy. Những công nghệ này đã hạ thấp rào cản gia nhập. Bạn không còn cần phải am hiểu toán học để tạo các phần tử 3d nữa.
Bạn cần lưu ý rằng mô-đun CSS 3D được thiết kế để giúp các nhà phát triển xây dựng các ứng dụng phong phú và thú vị về hình ảnh, nó không được thiết kế để cho phép bạn xây dựng thế giới 3d sống động.
Hỗ trợ trình duyệt và tăng tốc phần cứng
Góc nhìn -webkit
-webkit-transform-3d
Thông tin quan trọng cần nhớ là mặc dù trình duyệt có thể "hỗ trợ" 3d nhưng nó có thể không kết xuất được 3D do hạn chế về phần cứng và trình điều khiển. Cảnh 3D dựa trên DOM có thể rất tốn kém chi phí tính toán và do đó các nhà cung cấp trình duyệt đã quyết định thay vì làm chậm trình duyệt bằng một giải pháp kết xuất phần mềm thuần tuý, họ sẽ tận dụng GPU mà có thể không có sẵn trên tất cả các nền tảng
Phát hiện tính năng
Còn việc phát hiện tính năng thì sao? Tôi hy vọng bạn đã không hỏi! Các nhà phát triển đã và đang sử dụng các công cụ như Modernizr để xác định khả năng hỗ trợ cho các tính năng và khả năng cụ thể của trình duyệt. Mặc dù có thể phát hiện sự hiện diện của tính năng hỗ trợ cho phép biến đổi 3D, nhưng không thể phát hiện sự hiện diện của tính năng tăng tốc phần cứng, và tăng tốc phần cứng là thành phần chính.
Mẫu cơ bản
Không có gì tốt hơn việc đi thẳng vào vấn đề. Trong mẫu này, chúng ta sẽ áp dụng một tập hợp xoay vòng cơ bản của một phần tử DOM tuỳ ý.
Chúng ta bắt đầu bằng cách xác định một phối cảnh trên thành phần gốc.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Phối cảnh rất quan trọng vì nó xác định cách kết xuất độ sâu của cảnh 3D, giá trị từ 1-1000 sẽ tạo ra hiệu ứng rất rõ nét và có giá trị thấp hơn 1000. Sau đó, chúng ta thêm iframe và áp dụng xoay 30 độ xung quanh trục Z và Y
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
RA MẮT! Tức là phần tử này có khả năng tương tác hoàn toàn và về mọi phương diện, đó là một phần tử DOM hoàn chỉnh (ngoại trừ việc phần tử này giờ đây còn thú vị hơn). Nếu trình duyệt của bạn không hỗ trợ tính năng chuyển đổi 3D, thì sẽ không có gì xảy ra. Bạn sẽ chỉ thấy một iframe đơn giản không áp dụng chế độ xoay. Nếu trình duyệt của bạn hỗ trợ chuyển đổi 3d nhưng không tăng tốc phần cứng, trình duyệt có thể hơi kỳ lạ.
Ảnh động
Điều mà tôi thích về các phép biến đổi 3D của CSS3 là nó kết hợp rất tốt với mô-đun Transition CSS. Ảnh động và hiệu ứng chuyển tiếp rất dễ xác định trong CSS và việc áp dụng các ảnh động và hiệu ứng này cho 3d cũng không phải là ngoại lệ.
Việc tạo chuyển động cho các thành phần được áp dụng phối cảnh 3D rất dễ dàng. Chỉ cần đặt kiểu "chuyển đổi" thành "biến đổi", đính kèm thời lượng và hàm ảnh động. Kể từ đó, mọi thay đổi đối với kiểu "chuyển vị" sẽ là ảnh động.
Chúng tôi đã tái cấu trúc các ví dụ trước để sử dụng kiểu tài liệu, thay vì kiểu cùng dòng. Việc này không chỉ giúp xoá ví dụ mà còn cho phép mẫu tận dụng bộ chọn giả :hover. Bằng cách sử dụng bộ chọn :hover, bạn có thể bắt đầu quá trình chuyển đổi chỉ bằng cách di chuột qua phần tử. Tuyệt vời!
Tóm tắt
Đây chỉ là bạn lướt nhanh qua một số hiệu ứng thú vị có thể áp dụng cho bất kỳ phần tử DOM nào hiển thị bằng cách sử dụng các phép biến đổi CSS 3D. Vẫn còn nhiều việc có thể làm được chưa được đề cập trong hướng dẫn này.