Phối cảnh CSS Thuộc tính
Ví dụ
Cung cấp cho phần tử được định vị 3D một số phối cảnh:
#div1
{
perspective: 100px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính perspective
được sử dụng để cung cấp cho phần tử được định vị 3D một số phối cảnh.
Thuộc tính perspective
xác định khoảng cách giữa đối tượng với người dùng. Vì vậy, giá trị thấp hơn sẽ mang lại hiệu ứng 3D chuyên sâu hơn giá trị cao hơn.
Khi xác định thuộc tính perspective
cho một phần tử, chính các phần tử TRẺ sẽ có được chế độ xem phối cảnh, KHÔNG phải chính phần tử đó.
Mẹo: Ngoài ra, hãy xem thuộc tính phối cảnh-gốc , thuộc tính này xác định vị trí mà người dùng đang nhìn vào đối tượng 3D.
Để hiểu rõ hơn về thuộc tính phối cảnh, hãy xem bản demo .
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.perspective="50px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Cú pháp CSS
perspective: length |none;
Giá trị tài sản
Property Value | Description | Demo |
---|---|---|
length | How far the element is placed from the view | Demo ❯ |
none | Default value. Same as 0. The perspective is not set | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Tạo một khối lập phương và thiết lập các góc nhìn khác nhau:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Chuyển đổi CSS 3D
Tham chiếu DOM HTML: thuộc tính phối cảnh