Perspektywa CSS Właściwość
Przykład
Nadaj elementowi pozycjonowanemu w 3D pewną perspektywę:
#div1
{
perspective: 100px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość perspective
służy do nadania pewnej perspektywy elementowi pozycjonowanemu w 3D.
Właściwość perspective
określa odległość obiektu od użytkownika. Tak więc niższa wartość spowoduje bardziej intensywny efekt 3D niż wyższa wartość.
Podczas definiowania perspective
właściwości elementu to elementy CHILD uzyskują widok perspektywiczny, a NIE sam element.
Wskazówka: spójrz również na właściwość perspective-origin , która określa, w jakiej pozycji użytkownik patrzy na obiekt 3D.
Aby lepiej zrozumieć właściwość Perspektywa, obejrzyj prezentację .
Domyślna wartość: | Żaden |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.perspective="50px" |
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 | 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: length|none;
Wartości nieruchomości
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Utwórz kostkę i ustaw różne perspektywy:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Powiązane strony
Samouczek CSS: CSS 3D Transforms
Dokumentacja HTML DOM: właściwość perspektywy