Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Perspective

kodzik
Transform 

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!

linki