
Za pomocą funkcji perspective() możemy określić (potrzebny dla przekształceń w przestrzeni 3D) rozmiar perspektywy interesującego nas elementu HTML.
transform: perspective(300px) rotateX(45deg);
Za pomocą właściwości perspective oraz dowolnej dodatniej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar perspektywy, w której powinny znaleźć się elementy dzieci interesującego nas elementu HTML, lecz nie on sam.
perspective: 300px;
1. funkcja perspective ()
<div class="item item-1">hello!</div>
.item-1 { transform: perspective(300px) rotateX(50deg); }
hello!
2. funkcja perspective ()
<div class="item item-2">hello!</div>
.item-2 { transform: perspective(300px) rotateY(50deg); }
hello!
3. funkcja perspective ()
<div class="item item-3">hello!</div>
.item-3 { transform: perspective(300px) rotateX(50deg) rotateY(50deg); }
hello!
4. właściwość perspective
<div class="rodzic-1"> <div class="item dziecko-1">hello!</div> </div>
.rodzic-1 { border: 1px dashed #f78de7; perspective: 300px; } .item.dziecko-1 { transform: rotateX(50deg); }
hello!
5. właściwość perspective
<div class="rodzic-2"> <div class="item dziecko-2">hello!</div> </div>
.rodzic-2 { border: 1px dashed #f78de7; perspective: 300px; } .item.dziecko-2 { transform: rotateY(50deg); }
hello!