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 * |