Właściwość CSSTransformacje
perspective-origin
Ustawia punkt, z którego widz patrzy na scenę 3D.
- Wartość domyślna
50% 50%- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- elementy transformowalne (efekt dotyczy ich dzieci)
- JavaScript
element.style.perspectiveOrigin = "left top"
Przykład
#CSS
.stairs {
perspective: 500px;
perspective-origin: 50% -50%;
}HTML przykładu
<div class="stairs" style="perspective: 500px; perspective-origin: 50% -50%; display: grid; gap: 6px; padding: 16px;">
<div class="box" style="transform: rotateX(40deg);">Poziom 3</div>
<div class="box" style="transform: rotateX(40deg);">Poziom 2</div>
<div class="box" style="transform: rotateX(40deg);">Poziom 1</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość perspective-origin przesuwa punkt zbiegu perspektywy. Domyślnie widz patrzy dokładnie na środek elementu. Przesunięcie punktu sprawia, że scena wygląda jak oglądana z góry, z boku albo z dołu.
Działa razem z perspective i tak jak ona jest ustawiana na rodzicu, a wpływa na wygląd dzieci przekształconych w 3D.
Przyjmuje słowa kluczowe, procenty i długości, podobnie jak transform-origin.
Składnia
#Składnia
perspective-origin: <x> <y>?;Wartości
#Wartości w praktyce
#center
Widz patrzy na środek sceny.
.scene { perspective-origin: center; }top
Widok z góry.
.scene { perspective-origin: top; }bottom
Widok z dołu.
.scene { perspective-origin: bottom; }left
Widok z lewej strony.
.scene { perspective-origin: left; }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
#- Bez ustawionej
perspectiveta właściwość nic nie zmienia. - Delikatne przesunięcie punktu zbiegu dodaje scenom 3D realizmu, bo rzadko patrzymy na coś idealnie na wprost.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.