Ví dụ về thuộc tính transform: 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
Đăng lúc Mục: ,

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)