perspective-originИмовине утврђује порекло за perspectiveимовину. Замислите то као тачку нестајања тренутног 3Д простора.
Напомена што се тиче 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; ) Испод је демонстрација која показује како се 3Д коцка понаша када мења своју тачку нестајања променом perspective-originвредности (константе).
Хеј, анимирајмо порекло из перспективе, само из забаве!
- Почиње са `0% 0%` (горе лево)
- Затим идите на `100% 0%` (горе десно)
- Затим на `100% 100%` (доле десно)
- Затим на `0% 100%` (доле лево)
- Затим се вратите на 1. и поново покрените
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |