3D và CSS

bookmark_border Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Paul Kinlan

Giới thiệu

Trong một thời gian dài, 3D là đặc quyền của các ứng dụng dành cho máy tính. Gần đây, với sự ra mắt của các điện thoại thông minh nâng cao có quyền truy cập vào tính năng tăng tốc GPU gốc, chúng ta bắt đầu thấy 3D được sử dụng ở hầu hết mọi nơi.

Thông thường, 3D chủ yếu được dùng làm 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 đến khi giới thiệu các phép biến đổi phối cảnh trong WPF và Silverlight, một 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 thực tế cho các nhà phát triển ứng dụng (sau tất cả, 3D không hề dễ dàng).

Mô hình biến đổi 3D CSS được giới thiệu dưới dạng bản đặc tả 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 3D bằng cách cho phép tác giả ứng dụng áp dụng các phép biến đổi phối cảnh 3D cho bất kỳ phần tử DOM trực quan nào.

Bản thảo về việc chuyển đổi 3D CSS là một phần mở rộng hợp lý cho Mô hình chuyển đổi 2D CSS, giới thiệu một số thuộc tính bổ sung, bao gồm: phối cảnh, xoay và chuyển đổi trong không gian 3D.

Trước đây, chúng ta chưa bao giờ có thể xây dựng giao diện 3D một cách dễ dàng như vậy. Những công nghệ này đã làm giảm rào cản gia nhập. Bạn không cần phải là một chuyên gia toán học để tạo các thành phần 3D.

Xin lưu ý rằng mô-đun CSS 3D được thiết kế để giúp nhà phát triển xây dựng các ứng dụng phong phú và thú vị về mặt hình ảnh, chứ không phải để giú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

-webkit-perspective

-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 có thể không thể kết xuất 3D do các hạn chế về phần cứng và trình điều khiển. Các cảnh 3D dựa trên DOM có thể tốn kém về mặt điện toán, 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 giải pháp kết xuất phần mềm thuần tuý, họ sẽ tận dụng GPU có thể không có trên tất cả các nền tảng

Phát hiện tính năng

Còn tính năng phát hiện tính năng thì sao? Tôi hy vọng bạn sẽ không hỏi! Các nhà phát triển đã sử dụng các công cụ như Modernizr để phát hiện khả năng hỗ trợ cho các tính năng và chức năng cụ thể của trình duyệt. Mặc dù có thể phát hiện sự hỗ trợ cho các 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, trong khi đó, tính năng 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 là bắt đầu ngay. Trong mẫu này, chúng ta sẽ áp dụng một tập hợp các phép xoay 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 phần tử 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 hiển thị chiều sâu của cảnh 3D, các giá trị từ 1 đến 1000 sẽ tạo ra hiệu ứng rất rõ ràng và các giá trị trên 1000 sẽ ít rõ ràng hơn. Sau đó, chúng ta thêm một iframe và áp dụng chế độ xoay 30 độ xung quanh trục Z và Y

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! Đó là tất cả, phần tử này có khả năng tương tác đầy đủ và về mọi khía cạnh, đây là một phần tử DOM hoàn chỉnh (ngoại trừ việc giờ đây nó trông còn tuyệt hơn). Nếu trình duyệt của bạn không hỗ trợ phép biế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 hiệu ứng xoay. Nếu trình duyệt của bạn hỗ trợ các phép biến đổi 3D nhưng không có tính năng tăng tốc phần cứng, thì hình ảnh có thể trông hơi kỳ lạ.

Tạo ảnh động

Điều tôi yêu thích về các phép biến đổi 3D CSS3 là nó liên kết rất đẹp với mô-đun Chuyển đổi CSS. Bạn có thể dễ dàng xác định ảnh động và hiệu ứng chuyển đổi trong CSS, và việc áp dụng các hiệu ứng này cho 3D cũng không ngoại lệ.

Bạn có thể dễ dàng tạo ảnh động cho các phần tử có áp dụng phối cảnh 3D. Bạn chỉ cần đặt kiểu "transition" (hiệu ứng chuyển đổi) thành "transform" (biến đổi), đính kèm thời lượng và hàm ảnh động. Từ đó trở đi, mọi thay đổi đối với kiểu "biến đổi" sẽ được tạo ả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. Không chỉ giúp làm rõ 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 các hiệu ứng chuyển đổi chỉ bằng cách di chuyển chuột qua phần tử. Tuyệt vời!

Tóm tắt

Đây chỉ là một cái nhìn nhanh về một số hiệu ứng thú vị có thể áp dụng cho bất kỳ phần tử DOM hiển thị nào bằng cách sử dụng phép biến đổi 3D CSS. Vẫn còn nhiều việc có thể làm mà chưa được đề cập trong hướng dẫn này.