Przykład
Ustaw umieszczenie bazowy element 3D za:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Spróbuj sam " Definicja i Wykorzystanie
Nieruchomość perspektywy-origin określa, gdzie element 3D oparta jest na xi osi y. Ta właściwość pozwala na zmianę pozycji dolnej elementów 3D.
Przy określaniu właściwości perspektywy początkowego dla danego elementu, to elementy podrzędne, które są umieszczone, a nie sam element.
Note: Ta właściwość musi być używany razem z perspektywy nieruchomości, a jedynie wpływa 3D przekształcone elementy!
Aby lepiej zrozumieć właściwości początkowego perspektywy, zobaczyć demo .
| Domyślna wartość: | 50% 50% |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes. Read about animatable Try it |
| Wersja: | CSS3 |
| Składnia JavaScript: | object .style.perspectiveOrigin="10px 50%" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit- lub -moz- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| 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
| Wartość nieruchomości | Opis |
|---|---|
| x-axis | Definiowanie gdzie widok jest umieszczony na osi x Możliwe wartości:
Wartość domyślna: 50% |
| y-axis | Definiowanie gdzie widok jest umieszczony na osi y Możliwe wartości:
Wartość domyślna: 50% |
| inicjał | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej |
| dziedziczyć | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Podobne strony
Kurs CSS: CSS 3D Transformacje
HTML DOM referencyjny: perspectiveOrigin property