Muunnos-alkuperä - CSS-temppuja

transform-originOminaisuutta käytetään yhdessä CSS muunnoksia, joten voit muuttaa lähtöpiste muunnosperustaisesta.

.box ( transform: rotate(360deg); transform-origin: top left; )

Kuten edellä on osoitettu, transform-originominaisuus voi viedä korkeintaan kaksi välilyönnillä erotettua avainsana- tai pituusarvoa 2D-muunnokselle ja enintään kolme arvoa 3D-muunnokselle.

Yllä olevan koodin käyttö 200 x 200 kuvapistettä -ruudussa käyttäytyisi näin napsautustapahtumaa käyttäen siirrettyyn muunnokseen:

Katso tämä kynä!

Oletuksena muunnoksen alkuperä on "50% 50%", joka on täsmälleen minkä tahansa elementin keskellä. Alkuperän vaihtaminen "ylhäältä vasemmalle" (kuten yllä olevassa esittelyssä) saa elementin käyttämään elementin vasenta yläkulmaa kiertopisteenä.

Arvot voivat olla pituudet, prosentit tai avainsanoja top, left, right, bottom, ja center.

Ensimmäinen arvo on vaaka-asento, toinen arvo on pystysuora ja kolmas arvo edustaa sijaintia Z-akselilla. Kolmas arvo toimii vain, jos käytät 3D-muunnoksia, eikä se voi olla prosenttiosuus.

Katso Shawin (@shshaw) kynän muunnos-alkuperäiskuva CodePenistä.