CSS perspective
perspective 3
Chỉ định quan điểm về việc làm thế nào các yếu tố 3D được xem
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).
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 | giá trị | Ví dụ | Mô tả |
---|---|---|---|
perspective | number | perspective: 500; | khoảng chiều sâu theo đơn vị pixcel. |
none | perspective: none; |
Xem ví dụ
<style>
#ttt1
{
position: relative;
height: 200px;
width: 200px;
margin: 10px auto;
padding:10px;
border: 1px solid black;
background-color: #FBFFEB;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}#ttt2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #C5E099;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style><div id="ttt1"> ttt1 <div id="ttt2">ttt2</div></div>
ttt1
ttt2
Sự tương thích ( Cập nhật / Báo lỗi )
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Chủ đề: p. Programming language p.CSS p.CSS basic