Thuộc tính perspective-origin

Đị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).
Thuộc tính perspective-origin định nghĩa trục quay cho thành phần có sử dụng perspective.

Cấu trúc

tag {
    perspective-origin : trục-x trục-y;
}

perspective-origin có các giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
perspective-origin	trục-x trục-y Giá trị: trục-x: left, center, right, pixel, % trục-y: top, center, bottom, pixel, %	perspective-origin : 30% 20%;	Mặc định của trục-x và trục-y là 50% 50%.

Thuộc tính

giá trị

Ví dụ

Mô tả

perspective-origin

trục-x trục-y
Giá trị:

trục-x: left, center, right, pixel, %
trục-y: top, center, bottom, pixel, %

perspective-origin : 30% 20%;

Mặc định của trục-x và trục-y là 50% 50%.

Ví dụ

Xem thêm ví dụ

HTML viết:

<html>
<head></head>
<body>
<div>
<p>perspective-origin.</p>
</div>
</body>
</html>

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 chưa có perspective-origin:

perspective-origin

Thêm thuộc tính perspective-origin vào CSS:

div {
    perspective : 300;
    perspective-origin: -50% 20%;
    -moz-perspective : 300;
    -moz-perspective-origin: -50% 20%;
    -webkit-perspective : 300;
    -webkit-perspective-origin: -50% 20%;
    -o-perspective : 300;
    -o-perspective-origin: -50% 20%;
    -ms-perspective : 300;
    -ms-perspective-origin: -50% 20%;
}

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-origin:

perspective-origin

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-origin	7 -ms-	14 X	12 X	19 -webkit-	5.1 -webkit-	3.2 -webkit-	2.1 -webkit-	7.5

Link liên quan

perspective

resize