Perspektyvos kilmė - CSS-gudrybės

Turinys

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).

Patikrinkite šį rašiklį!

Ei, animuokime perspektyvos kilmę, tik savo malonumui!

Patikrinkite šį rašiklį!
  1. Tai prasideda nuo „0% 0%“ (viršuje kairėje)
  2. Tada eikite į „100% 0%“ (viršuje dešinėje)
  3. Tada iki „100% 100%“ (apačioje dešinėje)
  4. Tada iki „0% 100%“ (apačioje kairėje)
  5. 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 *

Įdomios straipsniai...