Pretvoriti-podrijetlo - CSS-trikovi

transform-originObjekt se koristi u sprezi s CSS preobražava, omogućujući vam da promijenite ishodište transformacije.

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

Kao što je gore navedeno, transform-originsvojstvo može uzeti do dvije vrijednosti razdvojene razmakom ključne riječi ili duljine za 2D transformaciju i do tri vrijednosti za 3D transformaciju.

Korištenje gornjeg koda na okviru od 200 piksela sa 200 piksela, s pretvorbom primijenjenom na prebačenu pomoću događaja klika, ponašao bi se ovako:

Pogledajte ovu olovku!

Prema zadanim postavkama ishodište transformacije je "50% 50%", što je točno u središtu bilo kojeg datog elementa. Promjena ishodišta u "gore lijevo" (kao u demonstraciji gore) dovodi do toga da element koristi gornji lijevi kut elementa kao točku rotacije.

Vrijednosti mogu biti duljine, postoci ili ključne riječi top, left, right, bottom, i center.

Prva vrijednost je vodoravni položaj, druga vrijednost je okomita, a treća vrijednost predstavlja položaj na Z osi. Treća vrijednost funkcionirat će samo ako koristite 3D transformacije i ne može biti postotak.

Pogledajte ilustraciju o izvoru olovke Shawa (@shshaw) na CodePenu.