Quan điểm - Thủ thuật CSS

Các perspectivethuộc tính CSS cho một yếu tố 3D-không gian bằng cách ảnh hưởng đến khoảng cách giữa các mặt phẳng Z và người sử dụng.

Sức mạnh của hiệu ứng được xác định bởi giá trị. Giá trị càng nhỏ, bạn càng đến gần mặt phẳng Z và hiệu ứng hình ảnh càng ấn tượng. Giá trị càng lớn thì hiệu quả sẽ càng tinh tế.

Quan trọng: Xin lưu ý rằng thuộc tính phối cảnh không ảnh hưởng đến cách phần tử được hiển thị; nó chỉ đơn giản là tạo ra một không gian 3D cho các yếu tố trẻ em. Đây là sự khác biệt chính giữa transform: perspective()chức năng và thuộc perspectivetính. Phần đầu tiên cung cấp chiều sâu phần tử trong khi phần sau tạo ra một không gian 3D được chia sẻ bởi tất cả các phần tử con đã biến đổi của nó.

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Kiểm tra cây bút này!

Bản demo trên nhằm mục đích chỉ ra sự khác biệt giữa chức năng và thuộc tính.

Ở phía bên trái, bạn có thể thấy thuộc tính được áp dụng cho phụ huynh ( perspective: 50em) của các phần tử được chuyển đổi ( transform: rotateY(50deg)).
Ở phía bên phải, phối cảnh được áp dụng từ phép biến đổi trực tiếp trên trẻ em ( transform: perspective(50em) rotateY(50deg)).

Điều này cho thấy cách thiết lập quan điểm về cha mẹ khiến tất cả trẻ em chia sẻ cùng một không gian 3D và do đó, cùng một điểm biến mất.

Hãy thử một cái gì đó thú vị hơn: một khối lập phương với các phép biến đổi và phối cảnh 3D.

Kiểm tra cây bút này!

Đây là cách khối lập phương được tạo ra: nó dựa vào hai trình bao bọc lồng nhau (một để tạo phối cảnh hình khối và một để bao bọc tất cả các mặt) và 6 phần tử để tạo các cạnh. Mỗi phần tử được cung cấp phép trộn biến đổi riêng của nó dịch chuyển và quay trong không gian 3D (ví dụ transform: rotateX(90deg) translateZ(1em)).

Hãy kết thúc với một bản demo giới thiệu những gì có thể là cơ sở của một thiết kế thế giới thực: một bức tường ảnh + chú thích sử dụng phối cảnh và biến đổi.