Làm thế nào để sử dụng CSS3 chuyển đổi ba chiều

Video: Thiết kế giao diện website với HTML CSS Intro 2025

Khi các trình duyệt trở nên mạnh mẽ hơn, các tính năng mới thú vị cho các chương trình HTML5 và CSS3 đang nổi lên. Một trong những sự phát triển thú vị là sự hình thành các phép biến đổi 3D. Chuyển đổi 3D cũng tương tự như các phép biến đổi truyền thống, nhưng nó cho phép có trục ảo thứ ba.

Các hình ảnh động thông thường, 2D sử dụng hệ tọa độ 2D, với trục X đi sang một bên và trục Y đi qua từ trên xuống dưới. Ngay cả trong chuyển đổi 2D, có một sự thừa nhận ngầm của một trục Z. Trục Z đi qua trung tâm của vật và hướng thẳng vào mắt người xem và trở lại vô cực phía sau màn hình. Các phép quay 2D nằm quanh trục Z tưởng tượng này.

Bạn có thể xác định các phần tử nào chồng chéo các phần tử khác thông qua thuộc tính CSS, vì vậy mặc dù tất cả các phần tử màn hình là khoảng cách thực tế giống với người dùng, chúng dường như có một dạng độ sâu.

Các phép biến đổi 3D có cùng hoạt động chung như 2D (dịch, xoay và tỉ lệ), nhưng bạn có thể áp dụng phép biến đổi dọc theo một trong ba trục: X, Y hoặc Z.

Bạn thấy năm hộp với phong cách gần giống nhau. Mỗi hộp có một sự chuyển đổi 3D khác nhau được áp dụng:

Hộp 1 có hành vi mặc định: Hộp 1 sử dụng bố cục thông thường và không có chuyển đổi 3D nào được áp dụng.
Hộp 2 được xoay 45 độ xung quanh x: Hộp 2 dường như bị cắt ngắn, nhưng nó thực sự quay quanh trục ngang (X). Lưu ý rằng cả hộp và văn bản bên trong hộp được rút ngắn.
Hộp 3 cũng được xoay quanh trục X, nhưng nó quay gần 90 độ, do đó gần như không nhìn thấy được. Hộp 4 là lộn ngược:
Hộp 4 được xoay 180 độ quanh trục X, lật nó hoàn toàn. Lưu ý rằng xoay xung quanh trục Y cũng lật hộp, nhưng văn bản sẽ vẫn ở phía trên, và sẽ được đảo ngược dọc theo trục thẳng đứng. Hộp 5 đang làm tất cả những điều điên rồ:
Hộp 5 có hai phép biến đổi được áp dụng cùng một lúc. Nó được xoay 45 độ xung quanh x và -45 độ dọc theo y. Hãy xem mã để xem chính xác những gì đang xảy ra ở đây.

transform3D. cơ thể html {perspective: 1000; -webkit-perspective: 1000;} # box1, # box2, # box3, # box4, # box5 {width: 100px; chiều cao: 80px; biên giới: 3px màu đen rắn; background-color: yellow;} # box2 {biến đổi: rotateX (45deg); -webkit-transform: rotateX (45deg);} # box3 {biến đổi: rotateX (89deg); -webkit-transform: rotateX (89deg);} # box4 {biến đổi: rotateX (180deg); -webkit-transform: rotateX (180deg);} # box5 {biến đổi: rotate3D (1, 2, 0, 45deg); -bộ 9: hộp 3 hộp 9 hộp hộp 9 hộp hộp 9 hộp hộp 9 hộp hộp 9 hộp hộp < Quy tắc mới đầu tiên là quan điểm.Thay đổi phối cảnh của phần tử gốc sẽ chứa các phần tử đã được chuyển đổi của bạn. Điều này cho phép bạn xác định cách hiển thị các phần tử. Phối cảnh cho biết mức độ đóng của máy ảnh đối với các phần tử.

Các hộp từ 2 đến 4 sử dụng cùng một quy tắc chuyển đổi:. Cơ chế này tương tự như chức năng quay 2D (), nhưng nó quay dọc theo trục X. Ngoài ra còn có các chức năng rotatey () và rotatez (), nhưng rotatez () thường được sử dụng vì nó giống như kỹ thuật quay 2D ().

Nếu bạn muốn áp dụng nhiều hơn một vòng xoay, bạn có thể sử dụng chức năng quay 3d (). Chức năng này có bốn tham số. Ba đầu tiên là sửa đổi cho ba trục, và thứ tư là một góc.

CSS3 cũng hỗ trợ các chức năng translatex, translatey () và translatez (). Các cơ chế này cho phép bạn chỉ định một bản dịch theo một trục cụ thể Chức năng translate3d () cho phép bạn dịch cùng nhiều trục cùng một lúc. CSS3 bao gồm các chức năng scalex, scaley và scalez, nhưng lại không phải lúc nào cũng được sử dụng vì chúng hoạt động tương tự như chức năng hiệu chỉnh 2D. Ngoài ra còn có một chức năng 3d () để sử dụng với nhiều quy mô. Hỗ trợ chuyển đổi 3D đang phát triển nhưng không hoàn chỉnh. Tại thời điểm này, phiên bản -Webkit và không có tiền tố sẽ hỗ trợ hầu hết các trình duyệt. Gia đình trình duyệt của trình duyệt IE có hỗ trợ giới hạn cho các phép biến đổi 3D.