perspective-originWłaściwość określa pochodzenie dla perspectivenieruchomości. Pomyśl o tym jako o znikającym punkcie obecnej przestrzeni 3D.
Uwaga, jeśli chodzi o perspectivewłaściwość, perspective-originmusi być zdefiniowana w elemencie nadrzędnym, aby nadać przekształconym dzieciom głębię.
perspective-originNieruchomość nic nie robi sama. Musi być zdefiniowany na elemencie wraz z perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) Poniżej znajduje się demo pokazujące, jak zachowuje się kostka 3D podczas zmiany jej punktu zbiegu poprzez zmianę perspective-originwartości (stałych).
Hej, animujmy początek perspektywy, tak dla zabawy!
- Zaczyna się od `0% 0%` (na górze po lewej)
- Następnie przejdź do `100% 0% '(prawy górny róg)
- Następnie do „100% 100%” (na dole po prawej)
- Następnie do „0% 100%” (na dole po lewej)
- Następnie wróć do 1. i uruchom ponownie
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |