Cube là gì?
Cube nói 1 cách đơn giản theo
Google Translate là
Khối lập phương. Nó là một bài nâng cao về
transform. Nếu bạn chưa biết về
transform hãy tìm hiểu
ở đây trước khi xuất huyết não ở bài này.
Bạn sẽ hình tượng hóa để tạo ra các khối 3D bằng nhiều đối tượng thẻ và đó là cách tốt nhất để bắt đầu với
3D transform. Nhưng một khi bạn đã nắm vững kỹ thuật để sử dụng chúng, bạn sẽ có thể rơi vào trạng thái đót khát được đẩy nó đi xa hơn và tạo thành một khối đối tượng 3D hình lăng kính.
Tạo ra Cube như thế nào?
Lưu ý: Hãy mường tượng những chữ cái trong dấu
/**/ là tên của thẻ. Vì trong BBCode mình không thể đặt class nên mình phải dùng note của CSS để đặt cho các bạn dễ hiểu. Và bạn càng không được viết xuống dòng, mình viết xuống dòng trong bài này mục đích là cho bạn
dễ nhìn vì sau bài này có thể bạn sẽ xuất huyết não nếu không viết như vậy.
Chúng ta hãy bắt đầu bằng cách tạo ra một khối lập phương.
[box=/*container*/; ||||]
[box=/*cube*/; ||||]
[box=/*trước*/; ||||]1[/box]
[box=/*sau*/; ||||]2[/box]
[box=/*trái*/; ||||]3[/box]
[box=/*phải*/; ||||]4[/box]
[box=/*trên*/; ||||]5[/box]
[box=/*dưới*/; ||||]6[/box]
[/box]
[/box]
Style, vị ví và kích thước cơ bản thiết lập 6 mặt chồng lên đầu của nhau trong hộp chứa.
[box=/*container*/;width: 200px; height: 200px; position: relative; perspective: 1000px; ||||]
[box=/*cube*/;width: 100%;height: 100%;position: absolute;transform-style: preserve-3d; ||||]
[box=/*trước*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]1[/box]
[box=/*sau*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]2[/box]
[box=/*trái*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]3[/box]
[box=/*phải*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]4[/box]
[box=/*trên*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]5[/box]
[box=/*dưới*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black; ||||]6[/box]
[/box]
[/box]
Với thẻ này, chúng ta có thể chỉ xoay được lưng của nó. Tuy nhiên các khối lập phương sẽ yêu cầu có 5 trong 6 mặt sẽ được luân chuyển. Mặt 1 và 2 ở mặt trước và mặt sau, mặt 3 và 4 sẽ ở 2 bên và mặt 5 và 6 sẽ ở bên trên và bên dưới.
[box=/*container*/;width: 200px; height: 200px; position: relative; perspective: 1000px; ||||]
[box=/*cube*/;width: 100%;height: 100%;position: absolute;transform-style: preserve-3d; ||||]
[box=/*trước*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 0deg ); ||||]1[/box]
[box=/*sau*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 180deg ); ||||]2[/box]
[box=/*trái*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 90deg ); ||||]3[/box]
[box=/*phải*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( -90deg ); ||||]4[/box]
[box=/*trên*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 90deg ); ||||]5[/box]
[box=/*dưới*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( -90deg ); ||||]6[/box]
[/box]
[/box]
Chúng ta có thể loại bỏ thuộc tính ở mặt trước, vì biến đổi này không có tác dụng, nhưng chúng ta hãy để nó ở đó để dễ kiểm soát hoặc tìm kiếm.
Bây giờ mỗi mặt đều đã được luân chuyển, và chỉ có mặt trước là được nhìn thấy. 4 mặt bên đều vuông góc với người xem, vì vậy chúng xuất hiện dường như vô hình. Để đẩy chúng ra 2 bên cố định của chúng, chúng cần phải được dịch chuyển ra từ trung tâm vị trí cố định của chúng. Mỗi cạnh của hình lập phương rộng 200px, từ tâm của khối lập phương thì chúng sẽ cần phải được dịch ra một nửa khoảng cách đó là 100px.
[box=/*container*/;width: 200px; height: 200px; position: relative; perspective: 1000px; ||||]
[box=/*cube*/;width: 100%;height: 100%;position: absolute;transform-style: preserve-3d; ||||]
[box=/*trước*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 0deg ) translateZ( 100px ); ||||]1[/box]
[box=/*sau*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 180deg ) translateZ( 100px ); ||||]2[/box]
[box=/*trái*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 90deg ) translateZ( 100px ); ||||]3[/box]
[box=/*phải*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( -90deg ) translateZ( 100px ); ||||]4[/box]
[box=/*trên*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 90deg ) translateZ( 100px ); ||||]5[/box]
[box=/*dưới*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( -90deg ) translateZ( 100px ); ||||]6[/box]
[/box]
[/box]
Lưu ý ở đây là chức năng của translateZ sau khi xoay. Thứ tự các biến đổi chức năng thực hiện là rất quan trọng. Dành ít phút và ngâm này: Mỗi mặt đầu tiên quay về phía mà vị trí của nó đã cố định, sau đó được dịch chuyển ra ngoài trong một vector riêng biệt.
Chúng ta đã có một khối lập phương, nhưng chúng ta vẫn chưa xong đâu.
Quay trở lại với mặt phẳng tọa độ Z
Vì mục đích của người dùng chúng ta, những biến đổi 3d của chúng ta không nên để bóp méo giao diện khi bảng điều khiển hoạt động ở vị trí của mình. Nhưng một khi chúng ta đã đẩy các yếu tố ra khỏi mặt phẳng Z, biến dạng là không thể tránh khỏi.
Để giữ cho khối 3D được chuyển đổi linh hoạt, Safari đã tổng hợp các yếu tố và sau đó được áp dụng các biến đổi. Do đó, việc chống vỡ văn bản sẽ vẫn cứ xảy ra như trước. Khi chuyển đổi được áp dụng, dịch chuyển về phía trước trong không gian 3D,
pixelation có thể xảy ra đáng kể.
Xem ví dụ:
Để giải quyết sự biến dạng và khôi phục điểm ảnh hoàn hảo trên khối lập phương, chúng ta có thể đẩy lùi các đối tượng 3D, để mặt trước sẽ được bố trí lại tại mặt phẳng tọa độ Z
[box=/*container*/;width: 200px; height: 200px; position: relative; perspective: 1000px; ||||]
[box=/*cube*/;width: 100%;height: 100%;position: absolute;transform-style: preserve-3d; transform: translateZ( -100px ); ||||]
[box=/*trước*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 0deg ) translateZ( 100px ); ||||]1[/box]
[box=/*sau*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 180deg ) translateZ( 100px ); ||||]2[/box]
[box=/*trái*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( 90deg ) translateZ( 100px ); ||||]3[/box]
[box=/*phải*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateY( -90deg ) translateZ( 100px ); ||||]4[/box]
[box=/*trên*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( 90deg ) translateZ( 100px ); ||||]5[/box]
[box=/*dưới*/;width: 196px;height: 196px;display: block;position: absolute;border: 2px solid black;transform: rotateX( -90deg ) translateZ( 100px ); ||||]6[/box]
[/box]
[/box]
Để lộ bất kỳ mặt nào của khối lập phương, chúng ta cần một style xoay quanh khối lập phương để lộ ra bất kỳ mặt nào. Việc chuyển đổi là sự đối lập với mặt tương ứng. Chúng ta chuyển đổi các lớp cần thiết trên hộp và áp dụng chuyển đổi thích hợp.
Thêm vào thuộc tính
transform của
cube:
Mặt trước : rotateY( 0deg )
Mặt sau : rotateX( -180deg )
Mặt phải : rotateY( -90deg )
Mặt trái : rotateY( 90deg )
Mặt trên : rotateX( -90deg )
Mặt dưới : rotateX( 90deg )
Chú ý về thứ tự của các chuyển đổi chức năng đã bị đảo ngược. Đầu tiên chúng ta cần đẩy các đối tượng trở lại với
translateZ, sau đó chúng ta xoay nó.
Kết thúc, chúng ta có thể thêm một quá trình chuyển dổi nữa để tạo hiệu ứng chuyển động quay giữa các vùng.
Ví dụ
Xem qua ví dụ trước khi bị quá nhiều chữ đâm thằng vào đầu và xuất huyết não nhé.
Đây là khối cube mà mình có.
Giờ thì xoay. Nhìn thấy chưa? Hết sức ảo diệu và đầy tính hư cấu!
Ớ, số 2 đâu rồi
Thấy chưa, cái thứ này rất khó để xác định!
Các bạn đã phần nào hiểu được cái thứ gây ra bệnh xuất huyết não này chưa?
- Hết -
Đánh dấu