Làm thế nào để bạn tạo một đối tượng 3d trong html?

Các chuyển đổi 3D của CSS3 đang nhanh chóng trở thành một lựa chọn hợp pháp để thêm chiều sâu và tính tương tác cho các dự án web. Trong hướng dẫn này, chúng tôi sẽ hướng dẫn cách bạn có thể tiếp cận quy trình thiết lập sân khấu 3D, xây dựng đối tượng 3D, thêm bóng đổ và hoạt ảnh cũng như đưa nội dung động vào để tạo thứ gì đó bạn có thể sử dụng trên trang web của riêng mình. Chúng ta cũng sẽ tìm hiểu một số tính năng CSS3 nâng cao và giải quyết một số vấn đề phổ biến

Tại sao nên sử dụng CSS?

Có rất nhiều cách để tạo đồ họa 3D trong HTML. Các giải pháp dựa trên JS, Canvas, SVG và thậm chí cả WebGL đều có sẵn và tất cả đều có ưu điểm của chúng, nhưng cũng có CSS. CSS đang bỏ qua nhu cầu về hình ảnh và có thể kết nối với GPU để tăng tốc đồ họa. Trình cắm không bắt buộc và CSS có thể tồn tại bên ngoài canvas có tường trên trang của bạn

CSS 3D không được tối ưu hóa như WebGL. Nó cũng tùy thuộc vào các trình duyệt không nhất quán. Tuy nhiên, việc kết hợp các đối tượng 3D vào các dự án web của bạn sẽ mang lại cho bạn một trục bổ sung để làm việc và có thể được sử dụng ngay hôm nay

Không phải tất cả các trình duyệt đều hỗ trợ đầy đủ cho các chuyển đổi 3D được sử dụng trong bài viết này, vì vậy để cho ngắn gọn, tôi sẽ sử dụng tiền tố -webkit. Hãy cẩn thận bao gồm các tiền tố cho Mozilla, Opera, MS cũng như phiên bản không có tiền tố nếu phù hợp. Các phiên bản đầy đủ của CSS, với các tiền tố, nằm trong tệp dự án

Khái niệm cơ bản. tạo khối 3D

Để bắt đầu, chúng ta sẽ xây dựng một khối 3D cơ bản, đặt và tạo hoạt ảnh cho nó trong không gian 3D. Trước tiên, chúng tôi thiết lập một số HTML sẽ đại diện cho các phần trong khối 3D

Tôi đã chọn sử dụng phần tử hình, nhưng nó có thể là div, span hoặc bất kỳ loại phần tử nào bạn thích. Có hai phần chính trong HTML này. Sân khấu, trong đó mọi thứ được đặt và một khối lập phương để đặt trên sân khấu

Sắp đặt sân khấu

Điều đầu tiên chúng ta cần khi xây dựng cảnh 3D là tạo một yếu tố để hoạt động như một sân khấu. Chúng tôi tạo chiều sâu cho sân khấu bằng cách sử dụng thuộc tính phối cảnh CSS

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Đặt giá trị phối cảnh cao hơn sẽ tạo ra hiệu ứng 3D tinh tế hơn; . Giá trị 800 pixel trở lên có xu hướng trông đẹp đối với hầu hết các đối tượng nhỏ, nhưng nếu bạn đang tạo thứ gì đó lớn hơn, chẳng hạn như tòa nhà chọc trời, bạn có thể muốn sử dụng giá trị nhỏ hơn để tạo nhiều góc cực hơn. Khi đặt phối cảnh, cũng cần đặt gốc phối cảnh (vị trí của camera ảo nhìn vào cảnh), có thể định vị theo trục X và Y

Tạo hình. tư duy với máy bay

Tạo hình dạng 3D bằng HTML và CSS liên quan đến việc nghĩ về đối tượng của bạn dưới dạng một tập hợp các mặt phẳng. Thay vì vẽ các đỉnh và lắp ráp các hình từ các điểm và đường như bạn có thể quen thuộc với các chương trình 3D khác, chúng ta sẽ làm việc với các mặt phẳng này và định vị từng mặt một. Chúng tôi lắp ráp khối lập phương với sáu mặt phẳng tương ứng với các mặt, trên và dưới. Để bắt đầu, hãy tạo hình dạng và kiểu dáng cho các phần tử hình

figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
}

Bước tiếp theo là cho họ biết vị trí ngồi trong không gian 3D

Máy biến áp đang đi

Chúng tôi đặt các số liệu bằng thuộc tính biến đổi. Các phép biến đổi trong CSS được tạo thành từ một chuỗi các hướng dẫn yêu cầu một hình dạng di chuyển, xoay, nghiêng và chia tỷ lệ. Họ đọc từ trái sang phải. Ví dụ

-webkit-transform: rotateY(45deg) translateZ(-100px) rotateX(10deg)

Chúng ta có thể dịch chuyển từng mặt của khối lập phương vào vị trí, bắt đầu từ mặt trước và mặt sau

.cube { -webkit-transform-style: preserve-3d; }
figure { -webkit-transform-origin: 50% 50% 0; }
.front { -webkit-transform: translateZ(150px); }
.back { -webkit-transform: rotateY(180deg) translateZ(150px); }

Lưu ý việc sử dụng thuộc tính kiểu biến đổi. khi điều này được đặt thành bảo toàn-3d, các mặt của khối lập phương sẽ thực hiện các phép biến đổi trong không gian 3D của riêng chúng. Chúng tôi cũng chỉ định điểm xung quanh việc biến đổi được thực hiện. Thuộc tính gốc biến đổi đặt một điểm trong các trục X, Y và Z đóng vai trò là tâm quay. Đây là phần giữa của mặt trước của phần tử, ở giữa và ở giữa

Hình phía trước được dịch ra ngoài 150px; . Thứ tự quan trọng ở đây - các quy tắc chuyển đổi được áp dụng từ trái sang phải. Biến đổi thứ hai ở hình sau là một số dương. khi nó được xoay, mặt trước của nó hướng về phía sau của cảnh. Như trước đây, thứ tự của các quy tắc chuyển đổi quan trọng. Nếu một mục được xoay, trục Z của mục đó sẽ ở một góc khác và mọi chuyển động sẽ bị ảnh hưởng. Bây giờ, đặt các mặt khác

.top { -webkit-transform: rotateX(90deg) translateZ(150px); }
.bottom { -webkit-transform: rotateX(-90deg) translateZ(150px); }
.left { -webkit-transform: rotateY(-90deg) translateZ(150px); }
.right { -webkit-transform: rotateY(90deg) translateZ(150px); }

Bây giờ chúng ta có một khối lập phương hoàn chỉnh, được định vị trong cảnh 3D

Di chuyển nó, di chuyển nó

Hãy để tác phẩm 3D của chúng ta xoay trên sân khấu, sử dụng hoạt ảnh CSS

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }
}

Hoạt ảnh CSS đạt được bằng cách sử dụng một loạt khung hình chính. Khung hình chính là một tập hợp các trạng thái cho một đối tượng, được thiết lập bằng tỷ lệ phần trăm. Hoạt hình bắt đầu với vòng quay bằng 0 và kết thúc xoay hoàn toàn quanh trục Y. Áp dụng bộ khung hình chính này với thuộc tính hoạt hình

.cube { -webkit-animation: rotate 10s infinite linear; }

Hoạt hình xoay được áp dụng ở đây sẽ chạy trong 10 giây, lặp lại vô thời hạn và di chuyển với tốc độ tuyến tính nhất quán

che nắng

Chúng tôi có một khối lập phương đang quay trên sân khấu, nhưng tất cả đều rất sáng. Để thêm bóng mà không cần thêm bộ chọn khác, chúng tôi sẽ sử dụng bộ chọn giả

Bộ chọn giả giống như các phần tử HTML bổ sung có thể được chèn vào trước và sau nội dung của một phần tử. Chúng cung cấp cho chúng tôi các yếu tố bổ sung để làm việc và có thể chứa độ dốc, màu sắc hoặc thậm chí cả văn bản. Vì vậy, chúng ta có thể tạo hiệu ứng đổ bóng trên mỗi bề mặt của khối lập phương, chúng ta cần hai gradient - một cho khi bề mặt quay sang trái, cái còn lại khi quay sang phải

Trước và sau trong ví dụ này là bộ chọn giả, có thể được tạo kiểu và hoạt ảnh. Điều quan trọng cần lưu ý là điều này chưa được hỗ trợ tốt - Chrome, Firefox và IE10 cung cấp các mức hỗ trợ khác nhau - và hy vọng điều này sẽ được cải thiện. Chúng tôi áp dụng hoạt ảnh cho từng bộ chọn giả để định thời gian hiển thị/ẩn các chuyển màu này

.front:before { -webkit-animation: frontShading1 10s infinite linear; }
...

Mỗi hoạt ảnh được tạo thành từ một tập hợp các khung hình chính hiển thị hoặc ẩn độ dốc khi chúng hoạt ảnh. Đây là hai áp dụng cho mặt sau

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Toàn bộ hoạt ảnh, cùng với tiền tố cho từng trình duyệt, được bao gồm trong tệp dự án

Trên và dưới

Tiếp theo, trên và dưới. Mặt trên cần một dải màu trông như không chuyển động. Gắn một gradient lên trên cùng và xoay nó theo hướng ngược lại

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Đáy khối lập phương sẽ không hiển thị nhưng chúng ta có thể sử dụng nó để thêm bóng hộp

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Nhiều hơn màu sắc phẳng

Cho đến nay, chúng ta đã tạo, tô bóng và tạo hoạt ảnh cho một khối lập phương không sử dụng gì ngoài CSS, mặc dù có các màu phẳng ở các cạnh. Vì chúng tôi đang làm việc với các thành phần HTML nên chúng tôi có thể làm được nhiều hơn thế với nội dung

Các mặt của khối lập phương có thể chứa hình ảnh, văn bản - hoặc thậm chí các hoạt ảnh khác. Trong ví dụ dưới đây, tôi đã áp dụng một số hình nền từ trò chơi Minecraft

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Bóng mà chúng tôi đã thêm trước đó vẫn có hiệu lực ở đây, tạo cảm giác chiều sâu tốt hơn cho các bên. Nó sẽ hoạt động trên bất kỳ nội dung nào mà hình chứa

phản ánh

Như thể đổ bóng hoạt hình và đổ bóng là chưa đủ, chúng ta có thể thêm một chút độ sáng cho cảnh bằng cách sử dụng một số bộ lọc WebKit ưa thích (lưu ý rằng đây hiện là tính năng chỉ dành cho WebKit)

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

hộp tweet

Hãy tạo ra thứ gì đó thiết thực hơn. Trong ví dụ này, chúng tôi sẽ đặt khối lập phương thành nơi hiển thị tweet gần đây nhất của bạn và đặt một số thông tin phụ ở bên cạnh khối lập phương với tùy chọn để mọi người theo dõi bạn trên Twitter

Thiết lập HTML

Bắt đầu với cùng một HTML như trước đó, chúng tôi sẽ áp dụng một số hình nền để tạo cho nó một số kết cấu. Chúng tôi áp dụng hai kết cấu này cho khối lập phương

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Thêm một số nội dung

Thêm nội dung hiển thị khi khối lập phương quay. Nó sẽ đi về phía bên phải của khối lập phương. Bao gồm một chút JavaScript để gọi trong nút theo dõi (có thể lấy từ trang nút của Twitter). Hình có quyền lớp phải chứa một cái gì đó như thế này

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Nút theo dõi được định vị bằng cách thêm quy tắc iframe vào CSS

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Đặt một tweet trên đó

Twitter cung cấp một cách đơn giản để nhận các tweet gần đây nhất dưới dạng widget. Để thiết lập, hãy đăng nhập vào Twitter và điều hướng đến trang Tiện ích Twitter. Chọn nút Tạo mới, sau đó nhập tên người dùng Twitter mong muốn vào hộp Tên người dùng (ở đây chúng tôi sẽ sử dụng 'netmag'). Nhấn nút Tạo tiện ích để tạo mã nhúng của bạn

Chúng ta có thể tạo kiểu cho tiện ích và thêm chiều rộng, chiều cao và một số giá trị dữ liệu trong mã. Thay YOUR_WIDGET_ID bằng ID được cung cấp trong mã nhúng của bạn

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

chuyển tiếp

Chúng tôi sẽ không cần hoạt hình khung hình chính cho bóng. nó sẽ phản ứng với một sự kiện di chuột hoặc hoạt động. Thay vào đó, hãy thêm một số hiệu ứng chuyển tiếp trên bộ chọn giả bóng

.stage {
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

Bộ chọn giả ở mặt bên phải được đặt có độ mờ là 0. 4. Điều này thêm một chút bóng đổ và chúng ta có thể tạo hiệu ứng động cho độ mờ để làm cho khuôn mặt trở nên sáng hơn khi nó quay về phía trước. Bên phải. sau khi bộ chọn giả bị ẩn vì chúng ta sẽ không xoay khối lập phương đủ xa để cần thiết. Mặt trước được tạo một số bóng mờ, mặc dù sáng hơn mặt phải, vì nó hướng về phía trước

Hoạt ảnh khi di chuột

Với các hiệu ứng đổ bóng được thêm vào, chúng tôi sẽ tạo hiệu ứng 'nhìn trộm' hoạt hình khi người dùng di chuột qua khối lập phương, đạt được bằng cách sử dụng trạng thái di chuột của CSS

figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
}

Khi di chuột, khối lập phương quay trái 50 độ. Chuyển đổi này được thực hiện thành một quá trình chuyển đổi suôn sẻ bằng cách áp dụng thuộc tính chuyển đổi. Đồng thời, các bộ chọn giả ở phía trước và bên phải được chuyển sang độ mờ là 0. 2

Kết quả của những chuyển đổi này là một hiệu ứng xoay 3D đẹp mắt, cho phép ẩn nội dung bổ sung và hiển thị khi người dùng di chuột qua khối lập phương. Có thể tìm thấy toàn bộ HTML và CSS trong tệp dự án

Tạo các đối tượng từ các phần tử HTML phẳng có những hạn chế. bất kỳ đối tượng nào bạn tạo sẽ cần phải được thực hiện bằng cách kết hợp các hình dạng phẳng để tạo ra kết quả cuối cùng. Các vật thể cong như ống và hình cầu rất khó tạo nếu không sử dụng nhiều yếu tố, vì vậy nó phù hợp nhất với các vật phẩm đơn giản hơn. Nhưng việc sử dụng bóng và hoạt hình được cân nhắc có thể tạo ra kết quả ấn tượng với các cấu trúc đơn giản hơn

Hiệu suất và thử nghiệm

Khi tạo các đối tượng 3D, hãy nhớ rằng hiệu suất trình duyệt và tốc độ máy tính có thể thay đổi rất nhiều. CSS không thực sự được tối ưu hóa cho các cảnh 3D bận rộn, cường độ cao về mặt đồ họa, do đó, nên thận trọng đối với các dự án công cộng. Thử nghiệm trên các nền tảng khác nhau. khách truy cập có thể đang sử dụng thiết bị di động hoặc máy tính cũ hơn, chậm hơn

Mặc dù chỉ còn là vấn đề thời gian cho đến khi tất cả các trình duyệt hỗ trợ chuyển đổi 3D, độ dốc và tất cả các nét hoàn thiện đẹp mắt mà chúng tôi đã sử dụng ở đây, nhưng thực tế là hầu hết vẫn chưa có. Chúng tôi phải đảm bảo khách truy cập của bạn sử dụng các trình duyệt cũ hơn không gặp phải trang bị hỏng. Một cách tiếp cận là sử dụng tính năng phát hiện và hiển thị phiên bản thay thế cho các trình duyệt không hỗ trợ các thuộc tính này

Trong trường hợp này, chúng tôi sẽ sử dụng Modernizr để phát hiện xem các chuyển đổi 3D có được hỗ trợ hay không và nếu không, chúng tôi sẽ hiển thị một hình ảnh tĩnh. Đầu tiên, đưa JS của Modernizr vào phần đầu của HTML

figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
}

On load, this will insert a csstransforms3d class into the tag. We then use that information to show or hide a fallback alternative:

figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
}

Đối với ví dụ này, dự phòng là một hình ảnh tĩnh. Sử dụng div dự phòng như một cơ hội để trình bày nội dung phẳng cho trình duyệt hoặc một thông báo thay thế

Bước tiếp theo

Một khối theo kiểu 3D có lẽ không phải là điều đầu tiên mà hầu hết các khách hàng thiết kế web yêu cầu, nhưng một số kỹ thuật này có thể được sử dụng theo những cách khác. Bạn có thể tạo hiệu ứng di chuột chuyển tiếp 3D trên logo, một cách hào nhoáng để giới thiệu sản phẩm mới hoặc sử dụng nó để giúp trình bày và điều hướng các tập hợp dữ liệu phức tạp. Việc đưa trục Z vào thiết kế của bạn có thể mở ra cơ hội cho một số ý tưởng thú vị và vui nhộn

Từ ngữ. Donovan Hutchinson. Donovan là một nhà thiết kế front-end có trụ sở tại Dublin. Anh ấy chuyên về thiết kế tương tác và viết blog về CSS và phát triển giao diện người dùng khác

Cảm ơn Val Head đã đánh giá ngang hàng về hướng dẫn này. Bài báo này ban đầu xuất hiện trên tạp chí mạng số 244

Làm cách nào để tạo các đối tượng 3D trong HTML?

HTML có hỗ trợ 3D không?

Làm cách nào để tạo hoạt hình 3D trong HTML?

Làm cách nào để tạo một đối tượng 3D trong JS?