Egenskaben transform-origin
Egenskaben transform-origin angiver punktet,
i forhold til hvilket transformationer af
elementet, angivet af egenskaben transform, vil finde sted.
Som standard er dette punkt elementets centrum,
og for eksempel vil rotation foregå i forhold til
dens centrum. Dog kan denne adfærd ændres
og få elementet til at rotere i forhold til
dens side, hjørne eller endda i forhold til
et punkt, der ligger uden for elementet.
Syntaks
selektor {
transform-origin: X-akse Y-akse Z-akse;
}
Værdier langs Y- og Z-aksen er ikke obligatoriske, de kan udelades (de vil antage standard- værdier). Forskydning af punktet langs Z-aksen er nødvendig for 3D-transformationer.
Værdier for X-aksen
| Værdi | Beskrivelse |
|---|---|
| CSS-enheder | Værdien er enhver enhed for størrelser, der angiver afstanden for transformationscentret fra elementets venstre kant. En positiv værdi flytter transformationscentret til højre (ind i elementet), og en negativ værdi - til venstre (ud af elementet) i forhold til elementets venstre kant. |
left |
Rotationspunktet vandret på elementets venstre kant. |
right |
Rotationspunktet vandret på elementets højre kant. |
center |
Rotationspunktet vandret i elementets centrum. |
Standardværdi: center.
Værdier for Y-aksen
| Værdi | Beskrivelse |
|---|---|
| CSS-enheder | Værdien er enhver enhed for størrelser, der angiver afstanden for transformationscentret fra elementets øverste kant. En positiv værdi flytter transformationscentret nedad (ind i elementet), og en negativ værdi - opad (ud af elementet) i forhold til elementets øverste kant. |
top |
Rotationspunktet lodret på elementets øverste kant. |
bottom |
Rotationspunktet lodret på elementets nederste kant. |
center |
Rotationspunktet lodret i elementets centrum. |
Standardværdi: center.
Værdier for Z-aksen
| Værdi | Beskrivelse |
|---|---|
| CSS-enheder | Værdien er enhver enhed for størrelser, der angiver afstanden for transformationscentret fra elementets plan. En positiv værdi flytter det mod os (væk fra skærmens plan), og en negativ værdi væk fra os. |
Standardværdi: 0px.
Eksempel
Lige nu er værdien af egenskaben transform-origin ikke angivet, og blokken vil rotere i forhold til sit centrum. Hold musen over blokken for at 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 nu vil blokken ved hold rotere i forhold til det øverste venstre hjørne:
<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 nu vil blokken ved hold rotere i forhold til
det nederste højre hjørne. For at gøre dette skal
transformationspunktet placeres 100% til højre
og 100% nedad (man kunne også angive
px, men ved ændring af elementets størrelse
ville transformationspunktet forblive på samme sted,
derfor er det bedre at bruge %):
<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
Lad os rotere blokken i forhold til det øverste højre 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
Lad os rotere blokken i forhold til midten af venstre side.
For at gøre dette skal vi for X-aksen angive left (punktet
for rotation vil være til venstre), og for Y-aksen - center
(rotationspunktet vil være i midten lodret):
<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
Egenskaben kan ikke kun anvendes til rotation,
men også til andre transformationer. Lad os forstørre
skalaen med scale, idet vi angiver transformationspunktet
som det nederste 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 lad os nu angive transformationspunktet som det øverste højre 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
Transformationspunktet kan også angives uden for elementet. I det næste eksempel vil den sorte blok, når musen holdes over den røde blok, udføre en rotation i forhold til et punkt, der befinder sig uden for:
<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);
}
:
