Egenskapen transform-origin
Egenskapen transform-origin setter punktet,
som transformasjoner av elementet vil skje i forhold til,
satt av egenskapen transform.
Som standard er dette punktet - elementets senter,
og for eksempel vil rotasjon skje i forhold til
dets sentrum. Dette oppførselen kan imidlertid endres
og få elementet til å rotere i forhold til
sin side, hjørne eller til og med i forhold til
et punkt som ligger utenfor elementet.
Syntaks
velger {
transform-origin: X-akse Y-akse Z-akse;
}
Verdier for Y- og Z-aksene er ikke obligatoriske, de kan utelates (de vil da ta standard verdier). Forskyvning av punktet langs Z-aksen er nødvendig for 3D-transformasjoner.
Verdier for X-aksen
| Verdi | Beskrivelse |
|---|---|
| CSS-enheter | Verdien er alle enheter for størrelser, som setter avstanden til transformasjonssenteret fra venstre kant av elementet. En positiv verdi flytter transformasjonssenteret til høyre (innover i elementet), og en negativ verdi - til venstre (utover fra elementet) i forhold til venstre kant av elementet. |
left |
Rotasjonspunktet horisontalt på venstre grense av elementet. |
right |
Rotasjonspunktet horisontalt på høyre grense av elementet. |
center |
Rotasjonspunktet horisontalt i sentrum av elementet. |
Standardverdi: center.
Verdier for Y-aksen
| Verdi | Beskrivelse |
|---|---|
| CSS-enheter | Verdien er alle enheter for størrelser, som setter avstanden til transformasjonssenteret fra øvre kant av elementet. En positiv verdi flytter transformasjonssenteret nedover (innover i elementet), og en negativ verdi - oppover (utenfra elementet) i forhold til øvre kant av elementet. |
top |
Rotasjonspunktet vertikalt på øvre grense av elementet. |
bottom |
Rotasjonspunktet vertikalt på nedre grense av elementet. |
center |
Rotasjonspunktet vertikalt i sentrum av elementet. |
Standardverdi: center.
Verdier for Z-aksen
| Verdi | Beskrivelse |
|---|---|
| CSS-enheter | Verdien er alle enheter for størrelser, som setter avstanden til transformasjonssenteret fra elementets plan. En positiv verdi flytter det mot oss (fra skjermens plan), og en negativ verdi bort fra oss. |
Standardverdi: 0px.
Eksempel
Nå er verdien til egenskapen transform-origin ikke satt og boksen vil rotere i forhold til sitt sentrum. Hold musepekeren over boksen for å se effekten:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Eksempel
Og nå vil boksen rotere i forhold til øvre venstre hjørne når musepekeren holdes over:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Eksempel
Og nå vil boksen rotere i forhold til
nedre høyre hjørne når musepekeren holdes over. For å gjøre dette bør
transformasjonspunktet plasseres 100% til høyre
og 100% nedover (man kunne ha satt
px, men ved endring av elementets størrelser
ville transformasjonspunktet forbli på samme sted,
derfor er det bedre å bruke %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Eksempel
La oss rotere boksen i forhold til øvre høyre hjørne:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Eksempel
La oss rotere boksen i forhold til senteret av venstre side.
For å gjøre dette, for X-aksen setter vi left (punktet
for rotasjon vil være til venstre), og for Y-aksen - center
(rotasjonspunktet vil være i sentrum vertikalt):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Eksempel
Egenskapen kan settes ikke bare for rotasjon,
men også for andre transformasjoner. La oss øke
skalaen ved hjelp av scale, og angi punktet
for transformasjon som nedre venstre hjørne:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Eksempel
Og nå angir vi transformasjonspunktet som øvre høyre hjørne:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Eksempel
Transformasjonspunktet kan også settes utenfor elementet. I neste eksempel, når musepekeren holdes over den røde boksen, vil den svarte boksen utføre en rotasjon i forhold til et punkt som befinner seg utenfor:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
