perspective-originNuosavybė nustato už kilmę perspectiveturtą. Pagalvokite apie tai kaip apie nykstantį dabartinės 3D erdvės tašką.
Pastaba apie perspectivenuosavybę perspective-originturi būti apibrėžta pagrindiniame elemente, kad būtų suteiktas transformuotų vaikų gylis.
perspective-originNuosavybė nėra nieko savaime. Jis turi būti apibrėžtas elemente kartu su 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; ) Žemiau yra demonstracinė versija, rodanti, kaip 3D kubas elgiasi keisdamas nykstantį tašką keisdamas perspective-originvertę (konstantos).
Ei, animuokime perspektyvos kilmę, tik savo malonumui!
- Tai prasideda nuo „0% 0%“ (viršuje kairėje)
- Tada eikite į „100% 0%“ (viršuje dešinėje)
- Tada iki „100% 100%“ (apačioje dešinėje)
- Tada iki „0% 100%“ (apačioje kairėje)
- Tada grįžkite į 1. ir paleiskite iš naujo
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |