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ừ […]
Đị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;
}
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| perspective-origin | trục-x trục-y Giá trị:
|
Mặc định của trục-x và trục-y là 50% 50%. |
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:
perspective.
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:
perspective.
Trình duyệt 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ợ:
| Trình duyệt PC | Smartphone – Tablets | |
| perspective-origin | Internet Explorer 7 (-ms-) | IOS – 3.2 (-webkit-) |
| Firefox – Không hỗ trợ | Android 2.1 (-webkit-) | |
| Opera – Không hỗ trợ | Window Phone 7.5 | |
| Google Chrome 19 (-webkit-) | ||
| Safari 5.1 (-webkit-) |
