Sifa ya transform-origin

Sifa transform-origin huweka sehemu, kuhusiana na ambayo mabadiliko ya kipengele yatafanyika, yaliyowekwa na sifa transform. Kwa chaguo-msingi hii sehemu - katikati ya kipengele, na, kwa mfano, mzunguko utafanyika kuhusiana na katikati yake. Hata hivyo, tabia hii inaweza kubadilishwa na kulifanya kipengele kuzunguka kuhusiana na upande wake, kona au kabisa kuhusiana na sehemu ambayo iko nje ya kipengele.

Syntax

Thamani kwenye mhimili Y na Z sio lazima, zinaweza kuachwa (zitachukua thamani za chaguo-msingi). Kuhamisha sehemu kwenye mhimili Z kunahitajika kwa mabadiliko ya 3D.

Thamani za mhimili X

Thamani	Maelezo
Vipimo vya CSS	Thamani ni vipimo vyovyote vya ukubwa, ambavyo huweka uhamisho wa katikati ya mabadiliko kutoka kwenye mpaka wa kushoto wa kipengele. Thamani chanya huhamisha katikati ya mabadiliko kulia (ndani ya kipengele), na hasi - kushoto (nje ya kipengele) kuhusiana na mpaka wa kushoto wa kipengele.
left	Sehemu ya mzunguko kwa usawa kwenye mpaka wa kushoto wa kipengele.
right	Sehemu ya mzunguko kwa usawa kwenye mpaka wa kulia wa kipengele.
center	Sehemu ya mzunguko kwa usawa katikati ya kipengele.

Thamani ya chaguo-msingi: center.

Thamani za mhimili Y

Thamani	Maelezo
Vipimo vya CSS	Thamani ni vipimo vyovyote vya ukubwa, ambavyo huweka uhamisho wa katikati ya mabadiliko kutoka kwenye mpaka wa juu wa kipengele. Thamani chanya huhamisha katikati ya mabadiliko chini (ndani ya kipengele), na hasi - juu (nje ya kipengele) kuhusiana na mpaka wa juu wa kipengele.
top	Sehemu ya mzunguko kwa wima kwenye mpaka wa juu wa kipengele.
bottom	Sehemu ya mzunguko kwa wima kwenye mpaka wa chini wa kipengele.
center	Sehemu ya mzunguko kwa wima katikati ya kipengele.

Thamani ya chaguo-msingi: center.

Thamani za mhimili Z

Thamani	Maelezo
Vipimo vya CSS	Thamani ni vipimo vyovyote vya ukubwa, ambavyo huweka uhamisho wa katikati ya mabadiliko kutoka kwenye ndege ya kipengele. Thamani chanya huhamisha kuelekea kwetu (kutoka kwenye ndege ya skrini), na hasi kutoka kwetu.

Thamani ya chaguo-msingi: 0px.

Mfano

Sasa thamani ya sifa transform-origin haijawekwa na kipande kitazunguka kuhusiana na katikati yake. Leta kielekezi juu ya kipande ili kuona athari:

:

Mfano

Na sasa wakati wa kuelekeza kipande kitazunguka kuhusiana na kona ya juu kushoto:

:

Mfano

Na sasa wakati wa kuelekeza kipande kitazunguka kuhusiana na kona ya chini kulia. Kwa hili inapaswa kupeleka sehemu ya mabadiliko kwa 100% kulia na kwa 100% chini (ingewezekana kuweka pia px, lakini wakati wa kubadilisha ukubwa wa kipengele sehemu ya mabadiliko ingebaki mahali pake, kwa hiyo ni bora kufanya kwa %):

:

Mfano

Wazungushe kipande kuhusiana na kona ya juu kulia:

:

Mfano

Wazungushe kipande kuhusiana na katikati ya upande wa kushoto. Kwa hili kwa mhimili X tunaweka left (sehemu ya mzunguko itakuwa kushoto), na kwa mhimili Y - center (sehemu ya mzunguko itakuwa katikati kwa wima):

:

Mfano

Sifa inaweza kuwekwa sio tu kwa mzunguko, lakini pia kwa mabadiliko mengine. Wacha tuongeze kipimo kwa kutumia scale, tukibainisha sehemu ya mabadiliko kama kona ya chini kushoto:

:

Mfano

Na sasa tubainishe sehemu ya mabadiliko kama kona ya juu kulia:

:

Mfano

Sehemu ya mabadiliko inaweza kuwekwa na nje ya kipengele. Katika mfano ujao wakati wa kuelekeza kielekezi kwenye kipande chekundu kipande cheusi kitafanya mzunguko kuhusiana na sehemu ambayo iko nje:

: