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

Thuộc tính perspective-origin

Thuộc tính perspective-origin định nghĩa trục quay cho thành phần có sử dụng perspective.

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, CSS viết:

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

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

Giá trị Ví dụ Hiển thị
trục-x 
perspective-origin: -100% 50%;
-moz-perspective-origin: -100% 50%;
-webkit-perspective-origin: -100% 50%;
-o-perspective-origin: -100% 50%;
-ms-perspective-origin: -100% 50%;

perspective-origin

 
perspective-origin: 0% 50%;
-moz-perspective-origin: 0% 50%;
-webkit-perspective-origin: 0% 50%;
-o-perspective-origin: 0% 50%;
-ms-perspective-origin: 0% 50%;

perspective-origin

 
perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;

perspective-origin

 
perspective-origin: 100% 50%;
-moz-perspective-origin: 100% 50%;
-webkit-perspective-origin: 100% 50%;
-o-perspective-origin: 100% 50%;
-ms-perspective-origin: 100% 50%;

perspective-origin

 
perspective-origin: 150% 50%;
-moz-perspective-origin: 150% 50%;
-webkit-perspective-origin: 150% 50%;
-o-perspective-origin: 150% 50%;
-ms-perspective-origin: 150% 50%;

perspective-origin

 
perspective-origin: left center;
-moz-perspective-origin: left center;
-webkit-perspective-origin: left center;
-o-perspective-origin: left center;
-ms-perspective-origin: left center;

perspective-origin

 
perspective-origin: center center;
-moz-perspective-origin: center center;
-webkit-perspective-origin: center center;
-o-perspective-origin: center center;
-ms-perspective-origin: center center;

perspective-origin

 
perspective-origin: right center;
-moz-perspective-origin: right center;
-webkit-perspective-origin: right center;
-o-perspective-origin: right center;
-ms-perspective-origin: right center;

perspective-origin
trục-y 
perspective-origin: 50% -200%;
-moz-perspective-origin: 50% -200%;
-webkit-perspective-origin: 50% -200%;
-o-perspective-origin: 50% -200%;
-ms-perspective-origin: 50% -200%;

perspective-origin

 
perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-webkit-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;

perspective-origin

 
perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;

perspective-origin

 
perspective-origin: 50% 200%;
-moz-perspective-origin: 50% 200%;
-webkit-perspective-origin: 50% 200%;
-o-perspective-origin: 50% 200%;
-ms-perspective-origin: 50% 200%;

perspective-origin

 
perspective-origin: center top;
-moz-perspective-origin: center top;
-webkit-perspective-origin: center top;
-o-perspective-origin: center top;
-ms-perspective-origin: center top;

perspective-origin

 
perspective-origin: center center;
-moz-perspective-origin: center center;
-webkit-perspective-origin: center center;
-o-perspective-origin: center center;
-ms-perspective-origin: center center;

perspective-origin

 
perspective-origin: center bottom;
-moz-perspective-origin: center bottom;
-webkit-perspective-origin: center bottom;
-o-perspective-origin: center bottom;
-ms-perspective-origin: center bottom;

perspective-origin