Đang bảo trì cáp quang biển nên mình chỉ vào được Vn-S (dù review bài viết cả phút) nhưng mà cũng đú bẩn up cái tut này kiếm tí point, ngoài ra cho bạn nào thích nghiên cứu hình học trực quan và sáng tạo trong bbcode nói riêng và css nói chung (Lưu ý: Tut hoàn toàn tự nghiên cứu và tự viết, nên có thể sai sót này nọ, mong sẽ được đóng góp hoàn thiện. Tuy nhiên vì là tut tự viết nên... thách con hàng nào kiếm ra được nguồn đấy ).
Giới thiệu sơ lược: Hexagon cylinder là hình trụ lục giác đều - tức là hình trụ đều có 2 đáy là lục giác đều. Tut này sẽ hướng dẫn cách để làm 1 cái Hexagon cylinder từ bbcode thuận tiện nhất có thể.
Đọc hết bài Cube - Sự đột phá của transform để hiểu rõ các tag sẽ dùng trong bài này, ngoài ra thì tut này cũng được lấy cảm hứng từ cube, nên đừng thắc mắc gì nhé
I
. Giới thiệu các thuộc tính sẽ dùng:
position:relative/position:absolute
Xác định chính xác vị trí các mặt của Hexagon cylinder.
width/height
Xác định chính xác kích thước các cạnh của Hexagon cylinder.
transform
Xác định chính xác góc xoay mỗi mặt của Hexagon cylinder. (Lưu ý: góc quay transform là góc toán học, tức là quay ngược chiều kim đồng hồ)
transform-origin
Xác định chính xác trục quay của mỗi cạnh của Hexagon cylinder (cái này cực quan trọng)
transfrom-style:preserve-3d
Thiết lập cấu trúc 3D.
margin
Xác định chính xác khoảng cách giữa các mặt so với trục chính của Hexagon cylinder.
II
. Cấu trúc Hexagon cylinder:
Một Hexagon cylinder toán học được cấu thành từ 8 mặt gồm: 6 mặt bên (hình chữ nhật hoặc hình vuông) và 2 mặt đáy (2 lục giác đều).
Một Hexagon cylinder bbcode cũng tương tự toán học, tuy nhiên nó sẽ được cấu thành từ 11 code [box] khác nhau gồm: 6 [box] tạo 6 mặt bên, 2 [box] tạo đáy trên, 2 [box] tạo đáy dưới, 1 [box] trục.
III
. Phân tích lý thuyết Hexagon cylinder:
Một lục giác đều ta luôn có góc giữa 2 cạnh kề nhau là 120deg, tức là đường thằng song song với 2 cạnh đối diện nhau sẽ chia lục giác thành 2 hình thang cân có đáy dưới là 60deg, đây là điều cực kì quan trọng trong tính toán độ đều của lục giác đáy.
Nếu gọi X là độ dài cạnh lục giác đáy, thì ta có chiều cao của hình thang được tạo bởi cách chia 2 lục giác phía trên là: X.sin(60deg). Tức là khoảng cách giữa mặt song song của Hexagon cylinder với mặt trục sẽ là X.sin(60deg).
Ta có thể thấy, dựa vào đây thì trục của Hexagon cylinder có độ dài bằng 2 lần độ dài của cạnh, tức là dài bằng 2X.
IV
. Các bước code Hexagon cylinder:
Để code Hexagon cylinder dễ dàng nhất, tốt nhất là nên thực hiện chính xác theo các bước sau (ở đây mình chọn X=450px nhé): B1: Code mặt trục của Hexagon cylinder.
Giải thích: cả code sẽ xoay quanh mặt trục và lấy mặt trục làm tâm, vậy nên mặt trục là quan trọng nhất và phải code đầu tiên.
Code:
Phân tích: position:relative đóng vai trò chủ chốt, nó giúp ta cố định các mặt bên có position:absolute theo mặt trục này. Border để dễ hình dung hơn.
B2: Code các mặt bên.
Giải thích: mặt bên dễ code hơn mặt đáy, ngoài ra dễ chỉnh sửa hơn nhiều. Code theo thứ tự từ trái sang phải. (hơi loạn não tí, nhưng nhìn trực quan sẽ dễ hình dung hơn).
B2.1: mặt trước:
Mặt trước là mặt song song với mặt trục của Hexagon cylinder, vì thế nó khá đơn giản.
Code:
Giải thích: position:absolute; top:0; left:0 là để mặt bên tạo ra luôn nằm ngay góc trái của mặt trục. Sau đó dùng margin-left:25% để "center" mặt đó. translateZ để nó "dời" ra phía trước theo trục Z. 390px chính là con số thỏa hệ thức X.sin(60deg) với X=450px
Preview:
Giải thích: position:absolute; top:0; left:0 là để mặt bên tạo ra luôn nằm ngay góc trái của mặt trục. transform-origin:left center để cho trục xoay của mặt này là cạnh bên phải. Sau đó transform: rotateY(-60deg) dùng để xoay nó ra phía trước, tạo góc 60deg.
Preview:
Giải thích: position:absolute; top:0; left:0 là để mặt bên tạo ra luôn nằm ngay góc trái của mặt trục. transform-origin:right center để cho trục xoay của mặt này là cạnh bên phải. Margin-left:-50% là để sau khi xoay ta có mặt thuận của cạnh hướng ra ngoài. Sau đó transform: rotateY(-120deg) dùng để xoay nó ra phía sau, tạo góc 60deg.
Preview:
Giải thích: position:absolute; top:0; left:0 là để mặt bên tạo ra luôn nằm ngay góc trái của mặt trục. transform-origin:left center để cho trục xoay của mặt này là cạnh bên trái. Margin-left:-100% là để sau khi xoay ta có mặt thuận của cạnh hướng ra ngoài. Sau đó transform: rotateY(120deg) dùng để xoay nó ra phía sau, tạo góc 60deg.
Preview:
Giải thích: position:absolute; top:0; left:0 là để mặt bên tạo ra luôn nằm ngay góc trái của mặt trục. transform-origin:left center để cho trục xoay của mặt này là cạnh bên trái. Margin-left:-100% là để sau khi xoay ta có mặt thuận của cạnh hướng ra ngoài. Sau đó transform: rotateY(60deg) dùng để xoay nó ra phía trước, tạo góc 60deg.
Preview:
B2.7.1: Mặt đáy trên:
Trong bbcode thì không có cách nào để vẽ trực tiếp một lục giác đều, vì thế nên ta sẽ vẽ thông qua 2 hình thang cân.
Code:
Giải thích: transform-origin:top center giúp tạo trục xoay là phía trên, sau đó dùng transform:rotateX(90deg) và transform:rotateX(-90deg) để xoay 2 hình thang lên phía trên.
Preview:
B2.7.2: Mặt đáy dưới:
Trong bbcode thì không có cách nào để vẽ trực tiếp một lục giác đều, vì thế nên ta sẽ vẽ thông qua 2 hình thang cân.
Code:
Giải thích: Tương tự mặt đáy trên, transform-origin:bottom center giúp tạo trục xoay là phía dưới, sau đó dùng transform:rotateX(90deg) và transform:rotateX(-90deg) để xoay 2 hình thang xuống phía dưới.
Review(**):
(**)Việc review này chỉ giúp người đọc tut có cái nhìn toàn thể về Hexagon cylinder, toàn bộ code review đã có chỉnh sửa cho mục đích này.
=====================================================
// ________________________________________________________\\
|| CHÌ CÓ BỌN CHÓ ĂN CỨT MỚI EDIT BÀI ĐỂ XEM CÁI HIDE NÀY NHÉ ||
\\-----------------------------------------------------------------//
=====================================================
Không khó phải không nào? Chủ yếu là sức sáng tạo đến cỡ nào thôi
V
. Áp dụng và ví dụ:
Áp dụng thì không nhiều lắm, vì muốn dùng thì nên biết thêm về animation (cái này nhạy cảm) nên cũng không giới thiệu nhiều được.
Ví dụ thì mình chỉ có cái code event Monopoly làm ví dụ thôi. Trong đó thì mình dùng animate để biến tấu tốc độ xoay, độ fade của các cạnh,.... nhưng sẽ không đi sâu, chỉ "giới thiệu" về "ví dụ áp dụng" cái Hexagon cylinder này thôi
VI
. Lời kết:
Chúc các bạn hiểu được cái tut hại não này. Mong là mọi người sẽ tiến sâu hơn nữa trên con đường chinh phục sự sáng tạo.
Hẹn gặp lại vào tut trụ tròn trong một tương lai không xa mà là xa ơi là xa
Tái bút: mod box vui lòng không chỉnh sửa gì tut, nếu cần mình có thể vm/pm/cmt để mình suy nghĩ và cập nhật.
Sửa lần cuối bởi hoangkhung1996; 08-06-2015 lúc 11:19.
).
là hình trụ lục giác đều - tức là hình trụ đều có 2 đáy là lục giác đều. Tut này sẽ hướng dẫn cách để làm 1 cái Hexagon cylinder từ bbcode thuận tiện nhất có thể.
thì trục của Hexagon cylinder có độ dài bằng 2 lần độ dài của cạnh, tức là dài bằng 2X.
Đánh dấu