De eigenschap transform-origin
De eigenschap transform-origin bepaalt het punt,
ten opzichte waarvan de transformaties
van het element, ingesteld door de eigenschap transform, zullen plaatsvinden.
Standaard is dit punt - het midden van het element,
en bijvoorbeeld zal rotatie plaatsvinden ten opzichte
van zijn midden. Dit gedrag kan echter worden gewijzigd
om het element te laten roteren ten opzichte
van zijn zijkant, hoek of zelfs ten opzichte
van een punt dat buiten het element ligt.
Syntaxis
selector {
transform-origin: X-as Y-as Z-as;
}
Waarden voor de Y- en Z-as zijn niet verplicht, ze kunnen worden weggelaten (ze nemen dan de standaardwaarden aan). Het verschuiven van het punt langs de Z-as is nodig voor 3D-transformaties.
Waarden voor de X-as
| Waarde | Beschrijving |
|---|---|
| CSS-eenheden | De waarde kan elke eenheid voor afmetingen zijn, die de offset van het transformatiecentrum vanaf de linkerrand van het element instelt. Een positieve waarde verschuift het transformatiecentrum naar rechts (naar binnen in het element), en een negatieve waarde - naar links (naar buiten het element) ten opzichte van de linkerrand van het element. |
left |
Het rotatiepunt horizontaal op de linkerrand van het element. |
right |
Het rotatiepunt horizontaal op de rechterrand van het element. |
center |
Het rotatiepunt horizontaal in het midden van het element. |
Standaardwaarde: center.
Waarden voor de Y-as
| Waarde | Beschrijving |
|---|---|
| CSS-eenheden | De waarde kan elke eenheid voor afmetingen zijn, die de offset van het transformatiecentrum vanaf de bovenrand van het element instelt. Een positieve waarde verschuift het transformatiecentrum naar beneden (naar binnen in het element), en een negatieve waarde - naar boven (naar buiten het element) ten opzichte van de bovenrand van het element. |
top |
Het rotatiepunt verticaal op de bovenrand van het element. |
bottom |
Het rotatiepunt verticaal op de onderrand van het element. |
center |
Het rotatiepunt verticaal in het midden van het element. |
Standaardwaarde: center.
Waarden voor de Z-as
| Waarde | Beschrijving |
|---|---|
| CSS-eenheden | De waarde kan elke eenheid voor afmetingen zijn, die de offset van het transformatiecentrum vanaf het vlak van het element instelt. Een positieve waarde verschuift het naar ons toe (van het schermvlak af), en een negatieve waarde van ons af. |
Standaardwaarde: 0px.
Voorbeeld
Momenteel is de waarde van de eigenschap transform-origin niet ingesteld en het blok zal roteren ten opzichte van zijn midden. Beweeg de muis over het blok om het effect te zien:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Voorbeeld
En nu zal het blok bij aanwijzen roteren ten opzichte van de linker bovenhoek:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Voorbeeld
En nu zal het blok bij aanwijzen roteren ten opzichte
van de rechter onderhoek. Om dit te doen moet
het transformatiepunt worden geplaatst op 100% naar rechts
en op 100% naar beneden (je zou ook
px kunnen instellen, maar bij het wijzigen van de afmetingen van het element
zou het transformatiepunt op zijn plaats blijven,
dus het is beter om % te gebruiken):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Voorbeeld
Laten we het blok roteren ten opzichte van de rechter bovenhoek:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Voorbeeld
Laten we het blok roteren ten opzichte van het midden van de linkerzijde.
Om dit te doen, stellen we voor de X-as left in (het punt
van rotatie zal links zijn), en voor de Y-as - center
(het rotatiepunt zal verticaal in het midden zijn):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Voorbeeld
De eigenschap kan niet alleen worden ingesteld voor rotatie,
maar ook voor andere transformaties. Laten we de
schaal vergroten met scale, waarbij we het punt
van transformatie instellen als de linker onderhoek:
<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);
}
:
Voorbeeld
En laten we nu het transformatiepunt instellen als de rechter bovenhoek:
<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);
}
:
Voorbeeld
Het transformatiepunt kan ook buiten het element worden ingesteld. In het volgende voorbeeld zal bij het aanwijzen van de muis over het rode blok, het zwarte blok een rotatie uitvoeren ten opzichte van een punt dat zich buiten bevindt:
<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);
}
:
