Css hình chữ thập

CSS có khả năng tạo ra tất cả các loại hình dạng. Hình vuông và hình chữ nhật rất dễ dàng vì chúng là hình dạng tự nhiên của web. Thêm một width và height và bạn có hình chữ nhật có kích thước chính xác mà bạn cần. Thêm border-radius và bạn có thể làm tròn hình đó, và bạn có thể biến những hình chữ nhật đó thành hình tròn và hình bầu dục.

Chúng tôi cũng nhận được các phần tử giả ::before và ::after trong CSS, cho chúng tôi khả năng có thêm hai hình dạng mà chúng tôi có thể thêm vào phần tử ban đầu. Bằng cách khéo léo định vị, biến đổi và nhiều thủ thuật khác, chúng ta có thể tạo ra nhiều hình dạng trong CSS chỉ với một phần tử HTML duy nhất

Ngày nay, cách tốt nhất để bạn vẽ hình là SVG hoặc sử dụng ____ trong CSS, giống như SVG (và có thể tham chiếu SVG). Ví dụ: hãy xem các bộ biểu tượng SVG này, trình chỉnh sửa clip-path này và phần giới thiệu về CSS clipping này. Bài báo này được viết ban đầu trước khi một trong hai công nghệ này thực sự nắm giữ

Mock up là mô hình thu nhỏ, là hình ảnh mô phỏng mẫu thiết kế của Designer xuất hiện thật ngoài đời – được tạo ra dưới dạng file vector hoặc PSD được thiết kế sẵn. Tuy nhiên ở đây mình sử dụng nó như 1 bản vẽ thiết kế có khả năng 'nổi' trên trang web. Bản mô phỏng này có thể bao gồm cả hình ảnh, cụ thể là các 'lớp' mà bạn muốn đặt trong thiết kế của mình. Trong VD này, đơn giản mình sử dụng toàn bộ khối vẽ bằng SVG (xem thêm cách vẽ SVG tại đây)

Create a shape

Trước hết, cần phải tạo ban đầu hình cho mô phỏng. Hình mình vẽ ra như thế này

.container {
  transform: rotateX(50deg) rotateY(0deg) rotateZ(-15deg);
}

Đấy là do từ lúc tạo đến bây giờ các layer đang 'dính' vào cha nó là

.container {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* giữ nguyên vị trí*/
}

2. Lúc này chỉ cần mỗi lớp dịch chuyển 3d 1 chút là được. Mỗi layer 1 sẽ được dịch chuyển khác nhau, layer 1 thì cứ giữ nguyên như vậy, layer 2 sẽ 'dịch chuyển' nổi lên trên layer 1 thêm 1 chút, layer 3 lại thêm 1 chút nữa. Tất nhiên là dịch chuyển vị trí thì mình sẽ dùng

.container {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* giữ nguyên vị trí*/
}

4

.container .layer-2 {
  transform: translateX(0px) translateY(60px) translateZ(120px);
}
.container .layer-3 {
  transform: translateX(0px) translateY(60px) translateZ(180px);
}

Sở dĩ đến đây mới dịch chuyển các lớp tạo hiệu ứng 3d, bởi vì nếu hướng dẫn bạn dịch ngay từ bước trước khi làm nghiêng, thì về lý thuyết là mình tạo đúng không gian 3 chiều cho lớp, rồi . Còn lại như hiện tại giống như đèn flash sáng tạo trông giống như mô hình vậy. Tuy nhiên, nếu làm như vậy, thì khi đang đứng đối chiếu, nhìn khó mà nhận ra được mỗi lớp đã dịch lên bao nhiêu rồi, và khó kiểm soát được khoảng cách các layer sao cho góc nghiêng mình muốn thì layer tách ra đủ . Vì vậy ko nên cố gắng tạo đúng ngay từ bước đầu nhé

.

Và do mình tạo ra khoảng cách giữa các lớp mặt phẳng, nên việc chính sẽ là translateZ. Tuy nhiên ở đây mình thấy chưa đẹp nên thêm dịch Y vào nhìn cho 3 lớp tách rõ ràng

There are coi as was done. Nhưng theo mình thấy thì để khá chán nản, nên đổi qua là giả lập thay đổi gốc khi hover vào. Như vậy trình bày lên trang web sẽ gây ấn tượng hơn nhiều. Dưới đây là bài mã chi tiết của mình

https. // codepen. io/bunnypi04/pen/yLeQpLr

Mô hình đẳng cự

Giới thiệu

Ví dụ ứng dụng tiếp theo dựa trên 1 kiểu hình ảnh gọi là Isometric. Nói một cách ngắn gọn thì Isometric là phương pháp miêu tả vẻ ngoài của các đối tượng ba chiều trong không gian hai chiều, là 1 phương pháp vẽ hiệu ứng 3D mô phỏng dựa trên kích thước thực tế. Bảng xuất hiện bao gồm 3 mặt điều khiển theo kích thước của các cạnh, trong đó ba trục tốc độ xuất hiện như nhau và góc giữa bất kỳ hai trong số đó là 120 độ. Isometric thực tế được ứng dụng rất nhiều, tạo cảm giác 3d cho hình ảnh, điển hình là mấy game kiểu nhà hàng mình hay chơi

. Có thể sử dụng từ khóa Isometric để định cấu hình rõ hơn về nó nhé.

)

)

Tuy nhiên, việc bắt đầu sử dụng công cụ này có một chút (bối rối), vì vậy mình sẽ hướng dẫn sơ qua cách sử dụng

Chú thích trước khi sử dụng

Như bài trước đã nói, trong 3D ngoại hình tròn và bán kính đường viền ra thì ko tạo được gì 'cong' cả. Trong bài trước cũng có hướng dẫn 'fake' các mặt cong cho các bạn. Vì vậy, công cụ này cũng không tạo được cấu hình

. Hình trụ trên thực tế ở đây được tạo từ 2 mặt đáy tròn + mặt bên cấu tạo từ các hình chữ nhật.

Hướng dẫn sử dụng

Khi mở ứng dụng lên, sẽ có 4 màn hình để quan sát vật chất 3D. Màn hình dạng Isometric, màn hình mặt chiếu đứng, màn hình mặt chiếu bằng, màn hình mặt chiếu bên. Các màn hình đều có thể chuyển đổi trạng thái. Riêng mặt Isometric thì có thể thay đổi góc nhìn bằng cách giữ chuột di chuyển

Start this

phong cách hình dạng. độ mờ đục. Độ 'trong suốt' của khối

Màu sắc. nếu muốn khối có các mặt là màu gì thì mở lên và chỉnh sửa màu tương ứng

Hình ảnh. Thay vì các mặt màu đơn, có thể thay thế bằng cách nền-hình ảnh bằng cách mở cái này và thay thế tương ứng

Thực tế thì bạn có thể điều chỉnh kích thước trực tiếp bằng cách nhấn vào từng hình, sẽ có thể kéo mở rộng kích thước (tương ứng với màn hình tham chiếu có thể hiển thị ở đó), hoặc chỉnh vị trí bằng cách kéo thả đến nơi. Tuy nhiên, để xác định chính xác nhất thì nên sử dụng thanh công cụ này nhé

Vị trí tâm x, y, z tất nhiên là bạn có thể đặt nó ở bất kỳ đâu, nhưng nên chọn sao cho tất cả các hình dạng dễ chỉnh sửa nhất. near root level. Như hình của mình có tâm đối xứng, vì vậy mình chọn tuyến thẳng đứng với x = 0 và z = 0 làm tâm cho hầu hết các hình

Lúc này thì vẽ hình dễ dàng có hình này

.

Có 2 cách để lấy mô hình 3D vừa tạo

• Nhúng hình ảnh vào web
• Hoặc lấy html css về thêm vào web

Luồng web chuyển đổi 3D

Ngoài ra còn có 1 ứng dụng trông 'có vẻ' khá hay ho để tạo hình không gian 3D là http. // 3d-biến đổi. luồng web. com/

Mình chưa có thời gian tìm hiểu về công cụ này vì nhìn nó hơi phức tạp

. Tuy nhiên, có vẻ như sẽ có nhiều lựa chọn tùy chỉnh cho kiểu máy đẹp hơn là ứng dụng trên. Nếu có hứng thú và thời gian các bạn có thể tìm hiểu xem nhé

Kết quả

Qua 2 bài minh họa ứng dụng, hy vọng rằng các bạn sẽ thích thú hơn trong việc tạo dựng hình ảnh 3D, hoặc tạo bằng tool rồi ném lên web 'lòe' mọi người nhé =))