Egenskapen transform-origin
Egenskapen transform-origin sätter punkten,
i förhållande till vilken transformationer
av elementet kommer att ske, som anges av egenskapen transform.
Som standard är denna punkt - elementets centrum,
och till exempel kommer rotation att ske i förhållande till
dess centrum. Men detta beteende kan ändras
och få elementet att rotera i förhållande till
sin sida, hörn eller till och med i förhållande till
en punkt som ligger utanför elementet.
Syntax
selektor {
transform-origin: X-axel Y-axel Z-axel;
}
Värden längs Y- och Z-axlarna är inte obligatoriska, de kan utelämnas (de kommer att anta standardvärden). Förskjutning av punkten längs Z-axeln behövs för 3D-transformationer.
Värden för X-axeln
| Värde | Beskrivning |
|---|---|
| CSS-enheter | Värdet är vilken som helst enhet för storlekar, som anger avståndet för transformationscentret från elementets vänstra kant. Ett positivt värde flyttar transformationscentret åt höger (inåt elementet), medan ett negativt värde flyttar det åt vänster (utåt från elementet) i förhållande till elementets vänstra kant. |
left |
Rotationspunkt horisontellt på elementets vänstra kant. |
right |
Rotationspunkt horisontellt på elementets högra kant. |
center |
Rotationspunkt horisontellt i elementets centrum. |
Standardvärde: center.
Värden för Y-axeln
| Värde | Beskrivning |
|---|---|
| CSS-enheter | Värdet är vilken som helst enhet för storlekar, som anger avståndet för transformationscentret från elementets övre kant. Ett positivt värde flyttar transformationscentret nedåt (inåt elementet), medan ett negativt värde flyttar det uppåt (utåt från elementet) i förhållande till elementets övre kant. |
top |
Rotationspunkt vertikalt på elementets övre kant. |
bottom |
Rotationspunkt vertikalt på elementets nedre kant. |
center |
Rotationspunkt vertikalt i elementets centrum. |
Standardvärde: center.
Värden för Z-axeln
| Värde | Beskrivning |
|---|---|
| CSS-enheter | Värdet är vilken som helst enhet för storlekar, som anger avståndet för transformationscentret från elementets plan. Ett positivt värde flyttar det mot oss (från skärmens plan), medan ett negativt värde flyttar det bort från oss. |
Standardvärde: 0px.
Exempel
Nu är värdet för egenskapen transform-origin inte satt och blocket kommer att rotera i förhållande till sitt centrum. Håll muspekaren över blocket för att 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);
}
:
Exempel
Och nu kommer blocket att rotera i förhållande till det övre vänstra hörnet vid hovring:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Exempel
Och nu kommer blocket att rotera i förhållande till
det nedre högra hörnet vid hovring. För att göra detta bör
transformationspunkten placeras 100% till höger
och 100% nedåt (man kunde ha angett
pixel också, men om elementets storlek ändras
skulle transformationspunkten förbli på plats,
därför är det bättre att använda %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Exempel
Låt oss rotera blocket i förhållande till det övre högra hörnet:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Exempel
Låt oss rotera blocket i förhållande till mitten av vänster sida.
För att göra detta, sätt för X-axeln till left (rotationspunkten
kommer att vara till vänster), och för Y-axeln - center
(rotationspunkten kommer att vara i mitten 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);
}
:
Exempel
Egenskapen kan sättas inte bara för rotation,
utan också för andra transformationer. Låt oss öka
skalan med scale, och ange transformationspunkten
som det nedre vänstra hörnet:
<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);
}
:
Exempel
Och nu sätter vi transformationspunkten som det övre högra hörnet:
<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);
}
:
Exempel
Transformationspunkten kan även sättas utanför elementet. I följande exempel, när musen hovrar över det röda blocket, kommer det svarta blocket att utföra en rotation i förhållande till en punkt som finns utanför:
<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);
}
:
