NộI Dung
- Bắt đầu
- Tạo cơ sở của bàn xoay
- Tạo bàn chân
- Cánh tay và đầu
- Màu sắc và kết cấu
- Kết xuất và xuất khẩu
- Hoàn thiện logo
- Tạo hoạt ảnh cho logo
Có một số cách để tạo hoạt ảnh 3D trên web, hầu hết chúng yêu cầu kiến thức tốt về JavaScript và WebGL hoặc sử dụng một trình cắm thêm như Flash. Nhờ các chuyển đổi 3D CSS, bạn có thể tạo 3D chỉ bằng HTML và CSS, nhưng không dễ làm như vậy. Tridiv, ứng dụng trực tuyến miễn phí của tôi, đơn giản hóa quy trình, cung cấp giao diện WYSIWYG đơn giản và trực quan cho phép người dùng tạo các đối tượng 3D mà không cần viết một dòng mã nào.
Trong hướng dẫn này, chúng ta sẽ tạo và tạo hoạt ảnh cho biểu trưng cho 'Tridiv Records', một hãng thu âm hư cấu, chỉ sử dụng HTML và CSS. Hình ảnh chính của logo sẽ được tạo ở dạng 3D bằng Tridiv. Sau đó, chúng tôi sẽ thêm các yếu tố kiểu chữ sử dụng HTML và CSS thông thường.
Bạn có thể xem hoạt ảnh cuối cùng và mã tạo ra nó ở đây.
Bắt đầu
Chúng ta sẽ bắt đầu bằng cách tạo bàn xoay ở chế độ 3D bằng Tridiv. Truy cập tridiv.com và khởi chạy ứng dụng. Bạn cần phải sử dụng Chrome, Safari hoặc Opera 15 (trở lên).
Trước khi bắt đầu, điều quan trọng là phải hiểu giao diện Tridiv. Phần chính của trình chỉnh sửa bao gồm bốn chế độ xem: ở trên cùng bên trái là chế độ xem 3D, cung cấp một cái nhìn đầy đủ về cảnh. Ba chế độ xem khác hiển thị nó từ phía trên, bên cạnh và phía trước. Sử dụng ba chế độ xem này, bạn có thể tạo, chỉnh sửa và di chuyển các hình dạng 3D.
Thanh công cụ ngang được chia thành hai phần: phần bên trái hiển thị thông tin liên quan đến tài liệu của bạn; phần bên phải chứa các công cụ để tạo và chỉnh sửa hình dạng. Các Di chuyển lựa chọn và Biên tập các nút lựa chọn chuyển đổi giữa các chế độ chỉnh sửa khác nhau.
Ngăn thuộc tính (thanh bên) hiển thị các cài đặt tài liệu như thu phóng và chụp vào lưới, và các thuộc tính của hình dạng đã chọn (kích thước, vị trí, xoay, màu, v.v.). Đơn vị được sử dụng cho kích thước và vị trí là ems; các góc quay được tính bằng độ.
Để tránh bất kỳ sự nhầm lẫn nào sau này trong hướng dẫn, chúng tôi sẽ sử dụng cách viết tắt sau:
w = chiều rộng h = chiều cao d = chiều sâu diam = đường kính x deg = quay theo trục x y deg = quay theo trục y z deg = quay theo trục z
Tạo cơ sở của bàn xoay
Bắt đầu bằng cách đặt giá trị thu phóng thành 200. Để giúp vẽ các hình dạng, hãy kích hoạt cài đặt chụp nhanh vào lưới trong Cài đặt tài liệu phần của thanh bên. Đặt giá trị snap thành 0.125.
Cơ sở của bàn xoay được bao gồm một hình khối đơn giản, vì vậy hãy nhấp vào Thêm hình khối trên thanh công cụ trên cùng. Bạn sẽ thấy hình khối xuất hiện trong cả bốn chế độ xem trong trình chỉnh sửa.
Đổi tên hình dạng thành căn cứ sử dụng trường tên của ngăn thuộc tính (dưới Thuộc tính hình dạng). Tên của hình dạng phải là tên lớp CSS hợp lệ vì nó sẽ được sử dụng trong mã do trình chỉnh sửa tạo ra. Chúng tôi sẽ sử dụng các tên lớp này sau này khi tạo hoạt ảnh cho biểu trưng, vì vậy hãy đảm bảo rằng bạn đặt tên cho mọi hình dạng mới mà bạn tạo đúng cách.
Sau khi hình khối được đặt tên, hãy đảm bảo rằng nó được chọn ở chế độ xem trên cùng (nó phải được đánh dấu bằng màu xanh lam, với một vòng tròn các công cụ xung quanh nó), sau đó nhấp vào Biên tập ở đầu vòng để hiển thị các chốt chỉnh sửa. Kéo các tay cầm điều khiển ở các cạnh của hình khối, cho đến khi đạt đến chiều rộng và chiều sâu w = 10 và d = 8 bên trong Thuộc tính hình dạng.
Nhấp vào hình dạng bên trong chế độ xem bên. Thao tác này sẽ hiển thị các chốt chỉnh sửa trong chế độ xem này, cho phép chúng tôi thay đổi chiều cao của nó. Điều chỉnh chiều cao cho đến khi đạt đến h = 2. Bạn cũng có thể nhập giá trị trực tiếp vào ngăn thuộc tính. Để làm tròn các góc của hình khối, hãy thay đổi giá trị các góc trong ngăn thuộc tính thành 1.75, sau đó nhấn [Đi vào] phím để áp dụng các thay đổi. Bạn sẽ có một cái gì đó như thế này.
Tạo bàn chân
Đối với chân bàn xoay, chúng tôi sẽ sử dụng các hình trụ. Thêm một hình trụ, sau đó thay đổi đường kính của nó thành diam = 1,75 và chiều cao của nó là h = 0,5. Bấm vào Di chuyển nút lựa chọn trong thanh công cụ trên cùng để hiển thị vùng có thể kéo trên hình dạng. Di chuyển hình trụ dưới đế, đặt nó vào một trong các góc. (Bạn có thể cần phải di chuyển nó ở các chế độ xem trên cùng, bên cạnh và phía trước.)
Nhân đôi hình trụ (nhấn Bản sao trong vòng tròn của công cụ hoặc nhấn D phím) và để di chuyển hình trụ mới đến một góc khác của đế. Lặp lại quá trình cho đến khi tất cả bốn chân được đặt đúng vị trí. Đừng quên đặt tên cho các hình trụ (ví dụ: chân-trái-trên cùng, foot-right-top, chân-trái-dưới cùng, chân-trái-trên cùng). Khi bạn làm xong, kết quả sẽ như thế này.
Bây giờ chúng ta sẽ xem xét việc tạo đĩa, đĩa, trục cánh tay và nút. Quá trình tạo các hình dạng tiếp theo tương tự như đối với bàn chân. Dưới đây là các kích thước được sử dụng cho các xi lanh khác nhau:
đĩa: diam = 7; h = 0,5 đĩa: diam = 6,75; h = 0,25 nút: diam = 1,5; h = 0,25 tay-trục-cơ sở: diam = 2,25; h = 0,25 trục tay đòn: diam = 1,375; h = 1
Để tinh chỉnh các mặt của hình trụ, bạn có thể tăng số lượng mặt trong mỗi hình trụ bằng cách sử dụng trường cạnh trong ngăn thuộc tính. Không thêm quá nhiều mặt vì điều này có thể ảnh hưởng tiêu cực đến hiệu suất toàn cầu của trình chỉnh sửa và hoạt ảnh cuối cùng. Trong trường hợp này, tôi khuyên bạn không nên sử dụng nhiều hơn 32 mặt cho mâm và đĩa. Cậu nên có vài thứ như thế này.
Cánh tay và đầu
Đối với cánh tay và phần đầu của bàn xoay, chúng tôi sẽ sử dụng các hình khối. Đối với cánh tay, hãy tạo một hình khối (w = 0,25; h = 0,25; d = 4), sau đó áp dụng một vòng quay của -33° trên trục y. Đối với phần đầu, hãy tạo một hình khối (w = 0,5; h = 0,5; d = 1), sau đó áp dụng một vòng quay của -33° trên trục y. Căn chỉnh cả hai hình dạng với hình trụ trục cánh tay. Kết quả sẽ như thế này.
Màu sắc và kết cấu
Chúng ta sắp hoàn thành với bàn xoay. Bước cuối cùng là chỉ định màu sắc và áp dụng họa tiết cho vinyl (hình ảnh đại diện cho bề mặt của bản ghi). Để chỉ định màu sắc, hãy chọn một hình dạng và nhấp vào màu sắc trong ngăn thuộc tính. Tridiv cho phép bạn chỉ định các màu riêng lẻ cho từng mặt của hình dạng, nhưng trong ví dụ này, chúng ta cần sử dụng trường tất cả để thay đổi màu của tất cả các mặt. Để thực hiện việc này, chỉ cần nhập mã màu hex vào trường, sau đó xác nhận bằng cách nhấn Đi vào.
Dưới đây là các màu được sử dụng trong ví dụ này:
đế: # 0099FF chân, nút, trục, cánh tay và đầu: đĩa # F2EEE5: # fa7f7a
Đối với kết cấu của vinyl, quá trình này tương tự như chỉ định màu sắc. Chọn hình trụ đĩa, sau đó nhấp vào hình ảnh trong ngăn thuộc tính. Dán URL của hình ảnh bạn muốn áp dụng cho vinyl vào trường trên cùng và xác nhận bằng cách nhấn Đi vào. Bạn có thể sử dụng hình ảnh của riêng mình hoặc tải xuống hình ảnh được sử dụng trong ví dụ này.
Bây giờ bạn sẽ có một cái gì đó giống như thế này.
Kết xuất và xuất khẩu
Bây giờ bàn xoay đã hoàn thành, chúng tôi sẽ làm việc theo cách mà bàn xoay được hiển thị trước khi xuất nó. Nhấn vào Xem trước trên đầu ngăn thuộc tính. Đặt giá trị thu phóng thành 200 để hiển thị bàn xoay lớn hơn. Để loại bỏ các đường viền màu đen của các hình dạng, hãy chuyển đến Biên giới của ngăn và đặt độ mờ thành 0. Kết quả sẽ giống như thế này.
Chúng tôi muốn bàn xoay được chiếu sáng từ trên xuống. Để thực hiện việc này, hãy xoay cảnh theo cách mà phần trên của bàn xoay hướng về phía bạn. Các cơ sở phải trông hoàn hảo hình chữ nhật. Thay đổi giá trị sáng và tối trong phần tridiv.com/d/4k6section của ngăn thuộc tính sẽ tạo lại bóng trong cảnh. Thay đổi giá trị ánh sáng thành 0.
Bàn xoay hiện đã sẵn sàng để xuất!
Hoàn thiện logo
Chúng tôi đã sẵn sàng thêm văn bản vào biểu trưng và tạo hoạt ảnh biểu trưng. Nhấn vào Biên tập trên nút CodePen ở dưới cùng bên trái của Xem trước xem để xuất mã sang CodePen. Điều quan trọng cần lưu ý là mã CSS do Tridiv tạo không sử dụng tiền tố của nhà cung cấp, vì vậy bạn sẽ cần sử dụng các công cụ như prefixr.com hoặc leftrou.github.io/prefixfree để mã hoạt động trong mọi trình duyệt. Bắt đầu bằng cách đóng ngăn JavaScript, vì chúng tôi sẽ không sử dụng nó. Trong ngăn HTML, hãy xóa thẻ kiểu được áp dụng cho .bối cảnh div.
Mở rộng ngăn CSS và thêm mã sau vào cuối:
.scene {biến đổi: translateY (-140px) xoayX (-55deg); }
Đây, dịchY (-140px) di chuyển bàn xoay 140px lên trên, để lại khoảng trống cho văn bản bên dưới nó. Sau đó, xoayX (-55deg) đặt độ nghiêng dọc của bàn xoay.
Để thêm văn bản, bạn cần thêm một .tiêu đề div ngay sau phần mở đầu #tridiv div trong ngăn HTML. Bên trong, thêm hai nhịp> (.main-title và .sub-title), cách nhau bởi giờ />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Sau đó, bạn cần phải áp dụng các phông chữ và phong cách chính xác. Trong ngăn CSS, nhập phông chữ Open Sans được sử dụng trong biểu trưng và thêm các kiểu cơ bản cho các phần tử văn bản.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Căn giữa khối văn bản + kiểu phông chữ cơ bản * / title {position: tuyệt đối; top: 50%; trái: 50%; lề: 0 0 0 -165px; chiều rộng: 330px; chiều cao: 5em; font-family: 'Open Sans', sans-serif; font-weight: 300; kích thước phông chữ: 24px; text-align: center; khoảng cách giữa các chữ cái: 1,5em; màu: # 0099FF; } title hr {border: 1px solid # fa7f7a; lề: .75em 0; } title span {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! Logo của bạn đã hoàn thành. Nó sẽ trông giống như hình ảnh bên dưới. Sau khi hoàn tất mô hình 3D của bạn, bạn có thể sử dụng sức mạnh của CSS để làm cho mô hình này tốt hơn nữa bằng cách thêm kiểu, hoạt ảnh hoặc sự kiện chuột: chỉ cần coi mô hình 3D giống như bất kỳ phần tử HTML nào khác.
Tạo hoạt ảnh cho logo
Xem hình ảnh động sử dụng biểu tượng tại đây. Khi các phần của bàn xoay 'rơi vào, mỗi phần trong số chúng chia sẻ cùng một hoạt ảnh khung hình chính với độ trễ khác nhau. Các hình dạng có thuộc tính hàng đầu được đặt thành 50%. Để tạo hiệu ứng rơi xuống, chúng tôi tạo hoạt ảnh thuộc tính hàng đầu từ -400px đến 50%:
@keyframes giảm {0% {top: -400px; } / * Chúng tôi bắt đầu hoạt ảnh định vị hình dạng với chiều cao 400px * / 100% {top: 50%; } / * sau đó chúng tôi kết thúc nó ở vị trí ban đầu * /}
Bạn có thể thêm hoạt ảnh này vào tất cả các hình dạng, như sau:
.shape {top: -400px; hoạt ảnh: giảm 1s dễ dàng 0s chuyển tiếp; }
Đặt thuộc tính hàng đầu thành -400px và thêm thời gian trễ:
.platter {animation-delay: 1,05s; } .disc {animation-delay: 1.35s; } .button {animation-delay: 1.5s; } ...
Tạo hiệu ứng 'thoát' cuối cùng bằng cách sử dụng xoayX thuộc tính:
90% {biến đổi: translateY (-5em) xoayX (780deg) xoayY (0deg); } 95% {biến đổi: translateY (-4em) xoayX (620deg) xoayY (0deg); } 100% {biến đổi: translateY (-4,5em) xoayX (660deg) xoayY (0deg); }
Đó là cách chúng tôi tạo ra phiên bản cụ thể này, nhưng hãy nhớ: không có giới hạn!
Từ ngữ: Julian Garnier
Bài báo này ban đầu xuất hiện trên tạp chí net số 248.
