Phối cảnh-nguồn gốc - Thủ thuật CSS

Anonim

Tài perspective-originsản xác định nguồn gốc cho perspectivetài sản. Hãy coi đó là điểm biến mất của không gian 3D hiện tại.

Lưu ý như đối với thuộc perspectivetính, perspective-originphải được xác định trên phần tử cha để cung cấp độ sâu cho các phần tử con được chuyển đổi.

Tài perspective-originsản không tự làm bất cứ điều gì. Nó phải được xác định trên một phần tử cùng với perspective.

/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin: 
 |  | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; )

Dưới đây là bản trình diễn cho thấy cách một hình khối 3D hoạt động khi thay đổi điểm biến mất của nó bằng cách thay đổi perspective-origingiá trị (hằng số).

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

Này, hãy tạo hiệu ứng cho nguồn gốc phối cảnh, chỉ cho vui thôi!

Kiểm tra cây bút này!
  1. Nó bắt đầu từ `0% 0% '(trên cùng bên trái)
  2. Sau đó, chuyển đến `100% 0% '(trên cùng bên phải)
  3. Sau đó đến `100% 100% '(dưới cùng bên phải)
  4. Sau đó đến `0% 100% '(dưới cùng bên trái)
  5. Sau đó quay lại 1. và khởi động lại

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
12 * 10 * 11 12 4*

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 3 * 3.2 *