Ví dụ về thuộc tính transform: perspective()

Thuộc tính transform với giá trị perspective()

Thuộc tính transform với giá trị perspective: Định nghĩa một biến đổi 3D dưới dạng phối cảnh.

HTML viết:

<html>
<head></head>
<body>
<p>transform</p>
</body>
</html>

CSS viết:

Giả sử ban đầu ta thực hiện một biến đổi rotateY(45deg)

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: rotateY(45deg);
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    -o-transform: rotateY(45deg);
    -ms-transform: rotateY(45deg);
}

Hiển thị trình duyệt khi thực hiện một biến đổi rotateY(45deg):

transform

Ta thấy thành phần đã thực hiện một phép quay 45 độ, tuy nhiên với góc nhìn 2D ta không thể nào thấy được góc quay đó, mà chỉ thấy thành phần bị biến dạng, để nhìn được góc quay này ta hãy thêm thuộc tính perspective.

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

p {
    background: #cc0000;
    height: 50px;
    margin: 0 auto;
    width: 120px;
    transform: perspective(400px) rotateY(45deg);
    -moz-transform: perspective(400px) rotateY(45deg);
    -webkit-transform: perspective(400px) rotateY(45deg);
    -o-transform: perspective(400px) rotateY(45deg);
    -ms-transform: perspective(400px) rotateY(45deg);
}

Hiển thị trình duyệt khi có transform: perspective()

transform