Định nghĩa và sử dụng
Thông thường khi nhìn một thành phần ta sẽ thấy thành phần có dạng 2D (chiều rộng và chiều cao), để nhìn vật thể 3D ta cần có thêm chiều sâu, thuộc tính perspective sẽ cho ta thấy được chiều sâu của thành phần, khoảng chiều sâu được tính từ điểm đặt ban đầu tới giá trị của perspective (theo đơn vị pixel).
Cấu trúc
tag {
perspective: giá trị;
}
perspective có các giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| perspective | số | perspective: 300; | khoảng chiều sâu theo đơn vị pixcel. |
| none | perspective: none; | Xác định không sử dụng perspective. |
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <p>perspective.</p> </div> </body> </html>
CSS viết:
p {
background: #cc0000;
height: 100px;
width: 100px;
position: absolute;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}
Hiển thị trình duyệt khi chưa có perspective:
perspective
Thêm thuộc tính perspective vào CSS:
div {
perspective: 300;
-moz-perspective: 300;
-webkit-perspective: 300;
-o-perspective: 300;
-ms-perspective: 300;
}
p {
background: #cc0000;
height: 100px;
width: 100px;
position: absolute;
transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
}
Hiển thị trình duyệt khi có perspective:
perspective
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính perspective:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| perspective | 7 -ms- |
X | X | 19 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
7.5 |