Thuộc tính perspective-origin định nghĩa trục quay cho thành phần có sử dụng perspective, để nhìn vật thể 3D ta cần có thêm chiều sâu.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 14/05/2016
• Tổng lược xem trang: 137 / 1 khách
• Đánh giá bởi người dùng:

Đị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;
}

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);
}

Một số giá trị trục x cho perspective-origin-property:

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: 50% 50%;
-moz-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;

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: right center;
-moz-perspective-origin: right center;
-webkit-perspective-origin: right center;
-o-perspective-origin: right center;
-ms-perspective-origin: right center;

Một số giá trị trục y cho perspective-origin-property:

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: 50% 200%;
-moz-perspective-origin: 50% 200%;
-webkit-perspective-origin: 50% 200%;
-o-perspective-origin: 50% 200%;
-ms-perspective-origin: 50% 200%;

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: center bottom;
-moz-perspective-origin: center bottom;
-webkit-perspective-origin: center bottom;
-o-perspective-origin: center bottom;
-ms-perspective-origin: center bottom;

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt