Właściwość CSSTransformacje
perspective
Dodaje głębię transformacjom 3D dzieci elementu.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- tak, jako długość
- Dotyczy
- elementy transformowalne (efekt dotyczy ich dzieci)
- JavaScript
element.style.perspective = "600px"
Przykład
#CSS
.scene {
perspective: 700px;
}
.card {
transform: rotateX(20deg) rotateY(-20deg);
}HTML przykładu
<div class="scene" style="perspective: 700px; display: grid; place-items: center; padding: 24px;">
<div class="box card" style="width: 180px; height: 110px; transform: rotateX(20deg) rotateY(-20deg);">Karta 3D</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość perspective ustawia się na rodzicu. Określa, jak daleko od ekranu znajduje się oko widza. Dzieci obracane w 3D wyglądają wtedy realistycznie: bliższa krawędź jest większa, dalsza mniejsza.
Mała wartość, na przykład 200px, daje mocną, dramatyczną perspektywę, jakby oglądać element z bliska. Duża wartość, na przykład 1500px, daje subtelny efekt. none wyłącza perspektywę i obroty 3D wyglądają płasko.
Perspektywę dla pojedynczego elementu możesz też ustawić funkcją perspective() w jego własnym transform.
Składnia
#Składnia
perspective: none | <długość>;Wartości
#Wartości w praktyce
#none
Brak głębi: obrócony element wygląda płasko.
.scene { perspective: none; }800px
Umiarkowana perspektywa.
.scene { perspective: 800px; }250px
Mocna perspektywa, jak z bliska.
.scene { perspective: 250px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Perspektywę ustawiasz na rodzicu, a obrót na dziecku. Odwrotnie efekt nie zadziała.
- Zacznij od wartości 600–1000px, to wygląda naturalnie w większości interfejsów.
Powiązane hasła
#- perspective-originUstawia punkt, z którego widz patrzy na scenę 3D.
- transform-styleDecyduje, czy dzieci elementu żyją we wspólnej przestrzeni 3D, czy są spłaszczane.
- backface-visibilityDecyduje, czy widać tył elementu obróconego w 3D.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
Widzisz błąd albo brakuje przykładu? Napisz do nas.