Właściwość źródła perspektywy CSS
Przykład
Zdefiniuj, z jakiej pozycji użytkownik patrzy na element pozycjonowany w 3D:
#div1
{
perspective: 100px;
perspective-origin: left;
}
Definicja i użycie
Właściwość perspective-origin
określa, z jakiej pozycji użytkownik patrzy na element pozycjonowany w 3D.
Podczas definiowania perspective-origin
właściwości elementu to elementy CHILD uzyskają efekt, a NIE sam element.
Uwaga: Ta właściwość musi być używana w połączeniu z właściwością Perspektywa !
Aby lepiej zrozumieć właściwość perspective-origin, obejrzyj demo .
Domyślna wartość: | 50% 50% |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.perspectiveOrigin="10px 50%" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit- lub -moz- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Składnia CSS
perspective-origin: x-axis y-axis|initial|inherit;
Wartości nieruchomości
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Powiązane strony
Samouczek CSS: CSS 3D Transforms
Dokumentacja HTML DOM: właściwość perspectiveOrigin