Ví dụ về thuộc tính perspective

Thuộc tính perspective

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).

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);
    -moz-transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
    -o-transform: rotateX(45deg);
    -ms-transform: rotateX(45deg);
}

Hiển thị trình duyệt khi chưa có perspective:

perspective

Thêm thuộc tính perspective, CSS viết:

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

Một số giá trị cho perspective-property

Ví dụ Hiển thị 
perspective: 200;
-moz-perspective: 200;
-webkit-perspective: 200;
-o-perspective: 200;
-ms-perspective: 200;

perspective

 
perspective: 300;
-moz-perspective: 300;
-webkit-perspective: 300;
-o-perspective: 300;
-ms-perspective: 300;

perspective

 
perspective: 500;
-moz-perspective: 500;
-webkit-perspective: 500;
-o-perspective: 500;
-ms-perspective: 500;

perspective