3D và CSS

Paul Kinlan

Giới thiệu

Trong một thời gian dài, 3D đã là ứng dụng bảo tồn cho các ứng dụng dành cho 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 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ì mô hình 3D chủ yếu được sử dụng làm thiết bị để chơi trò chơi hoặc sử dụng một số giao diện người dùng nâng cao. Mãi cho đến khi sự ra đời của các biến đổi Perspective trong WPF và Silverlight, một mô hình phù hợp để áp dụng hiệu ứng 3D cho các phần tử giao diện người dùng trở thành một giải pháp thiết thực cho các nhà phát triển ứng dụng (vì 3D không hoàn toàn dễ dàng).

Mô hình chuyển đổi CSS 3D được đưa ra 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 3D bằng cách cho phép tác giả ứng dụng áp dụng các 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.

Chưa bao giờ chúng tôi có thể xây dựng giao diện 3D dễ dàng như vậy. Những công nghệ này đã loại bỏ rào cản khi tham gia. Bạn không còn phải là một người đam mê toán học để xây dựng các yếu tố 3d nữa.

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? Mong là 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 cho 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! Vậy là xong, phần tử này hoàn toàn có tính tương tác và về mọi mặt, nó là một phần tử DOM hoàn chỉnh (ngoại trừ việc giờ đây nó trông còn thú vị hơn nữa). 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ệ.

Dễ dàng tạo chuyển động cho các phần tử được áp dụng phối cảnh 3D. 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. 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. Thao tác này không chỉ 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 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.