В perspective-originимота се определя произхода на perspectiveимуществото. Мислете за това като за изчезващата точка на текущото 3D-пространство.
Забележка, що се отнася до perspectiveсвойството, perspective-originтрябва да бъде дефинирана върху родителския елемент, за да се даде на трансформираните деца дълбочина.
В perspective-originимота не прави нищо по себе си. Той трябва да бъде дефиниран върху елемент заедно с 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; ) По-долу е демонстрация, показваща как 3D кубът се държи, когато променя точката си на изчезване чрез промяна на perspective-originстойността (константи).
Ей, нека анимираме перспективата, само за забавление!
- Започва от `0% 0%` (горе вляво)
- След това отидете на `100% 0%` (горе вдясно)
- След това до `100% 100%` (долу вдясно)
- След това до `0% 100%` (долу вляво)
- След това се върнете към 1. и рестартирайте
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 12* | 10 * | 11. | 12 | 4 * |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |