Proprietatea transform-origin
Proprietatea transform-origin stabilește punctul,
relativ la care vor avea loc transformările
elementului, definite de proprietatea transform.
Implicit, acest punct este centrul elementului,
și, de exemplu, rotația se va face relativ
la centrul său. Cu toate acestea, acest comportament poate fi schimbat
și elementul poate fi făcut să se rotească relativ
la una dintre laturile sale, colț sau chiar relativ
la un punct care se află în afara elementului.
Sintaxă
selector {
transform-origin: axa-X axa-Y axa-Z;
}
Valorile pe axele Y și Z nu sunt obligatorii, le puteți omite (acestea vor lua valorile implicit). Deplasarea punctului pe axa Z este necesară pentru transformările 3D.
Valori pentru axa X
| Valoare | Descriere |
|---|---|
| Unități CSS | Valoarea pot fi orice unități pentru dimensiuni, care stabilesc decalajul centrului de transformare față de marginea stângă a elementului. O valoare pozitivă deplasează centrul de transformare spre dreapta (în interiorul elementului), iar una negativă - spre stânga (în exteriorul elementului) față de marginea stângă a elementului. |
left |
Punctul de rotație pe orizontală pe marginea stângă a elementului. |
right |
Punctul de rotație pe orizontală pe marginea dreaptă a elementului. |
center |
Punctul de rotație pe orizontală în centrul elementului. |
Valoare implicită: center.
Valori pentru axa Y
| Valoare | Descriere |
|---|---|
| Unități CSS | Valoarea pot fi orice unități pentru dimensiuni, care stabilesc decalajul centrului de transformare față de marginea superioară a elementului. O valoare pozitivă deplasează centrul de transformare în jos (în interiorul elementului), iar una negativă - în sus (în exteriorul elementului) față de marginea superioară a elementului. |
top |
Punctul de rotație pe verticală pe marginea superioară a elementului. |
bottom |
Punctul de rotație pe verticală pe marginea inferioară a elementului. |
center |
Punctul de rotație pe verticală în centrul elementului. |
Valoare implicită: center.
Valori pentru axa Z
| Valoare | Descriere |
|---|---|
| Unități CSS | Valoarea pot fi orice unități pentru dimensiuni, care stabilesc decalajul centrului de transformare față de planul elementului. O valoare pozitivă îl deplasează spre noi (departe de planul ecranului), iar una negativă departe de noi. |
Valoare implicită: 0px.
Exemplu
Acum valoarea proprietății transform-origin nu este setată și blocul se va roti relativ la centrul său. Treceți cu mouse-ul peste bloc pentru a vedea efectul:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Exemplu
Iar acum la trecerea cu mouse-ul blocul se va roti relativ la colțul din stânga sus:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Exemplu
Iar acum la trecerea cu mouse-ul blocul se va roti relativ
la colțul din dreapta jos. Pentru aceasta trebuie să poziționați
punctul de transformare la 100% la dreapta
și la 100% în jos (se putea specifica
și în px, dar la modificarea dimensiunilor elementului
punctul de transformare ar rămâne pe loc,
de aceea este mai bine să folosiți %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Exemplu
Să rotim blocul relativ la colțul din dreapta sus:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Exemplu
Să rotim blocul relativ la centrul laturii stângi.
Pentru aceasta, pentru axa X vom stabili left (punctul
de rotație va fi în stânga), iar pentru axa Y - center
(punctul de rotație va fi în centru pe verticală):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Exemplu
Proprietatea poate fi stabilită nu doar pentru rotație,
ci și pentru alte transformări. Să mărim
scala cu ajutorul scale, specificând punctul
de transformare ca fiind colțul din stânga jos:
<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);
}
:
Exemplu
Iar acum să specificăm punctul de transformare ca fiind colțul din dreapta sus:
<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);
}
:
Exemplu
Punctul de transformare poate fi stabilit și în afara elementului. În următorul exemplu, la trecerea cu mouse-ul peste blocul roșu, blocul negru va efectua o rotație relativ la un punct care se află în exterior:
<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);
}
:
