transform-originVara kasutatakse koos CSS teisendused, lastes teil muuta lähtepunkt transformatsiooni.
.box ( transform: rotate(360deg); transform-origin: top left; )Nagu ülalpool näidatud, võib transform-originatribuut 2D teisenduse jaoks võtta kuni kaks tühikuga eraldatud märksõna või pikkuse väärtust ja 3D teisenduse puhul kuni kolme väärtust.
Ülaltoodud koodi kasutamine lahtris 200 x 200 pikslit ja klõpsamise sündmuse abil teisaldatule rakendatud teisendus käituks järgmiselt:
Vaikimisi on teisenduse alguspunkt “50% 50%”, mis on täpselt mis tahes antud elemendi keskel. Originaali muutmine ülemisele vasakule (nagu ülaltoodud demos) põhjustab elemendi pöörlemispunktina elemendi ülemise vasaku nurga kasutamist.
Väärtused võivad olla pikkusega, protsendid või võtmesõnad top, left, right, bottomja center.
Esimene väärtus on horisontaalne asend, teine väärtus on vertikaalne ja kolmas väärtus tähistab positsiooni Z-teljel. Kolmas väärtus töötab ainult siis, kui kasutate 3D-teisendusi ja see ei saa olla protsent.
Vaadake CodePenil Shaw (@shshaw) pliiatsi muundamise päritolu illustratsiooni.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 3.1+ | 3,5+ | 10,5+ | 9+ | 2.1+ | 3,2+ |