Thuộc tính phối cảnh CSS
Thí dụ
Cung cấp cho một phần tử được định vị 3D một số góc nhìn:
#div1
{
perspective: 100px;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc perspective
tính được sử dụng để cung cấp cho một phần tử được định vị 3D một số góc nhìn.
Thuộc perspective
tính xác định khoảng cách đối tượng cách xa người dùng. Vì vậy, giá trị thấp hơn sẽ dẫn đến hiệu ứng 3D chuyên sâu hơn giá trị cao hơn.
Khi xác định thuộc perspective
tính cho một phần tử, chính các phần tử CHILD nhận đượ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 gốc phối cảnh, 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 thuộc tính phối cảnh, hãy xem bản trình diễn .
Giá trị mặc định: | không ai |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.perspective = "50px" |
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 -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 |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí 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;
}
Các trang liên quan
Hướng dẫn CSS: CSS 3D Transforms
Tham chiếu DOM HTML: thuộc tính phối cảnh