Vetia transform-origin
Vetia transform-origin përcakton pikën,
në lidhje me të cilën do të ndodhin transformimet
e elementit, të përcaktuara nga vetia transform.
Si parazgjedhje kjo pikë është qendra e elementit,
dhe, për shembull, rrotullimi do të ndodhë në lidhje me
qendrën e saj. Megjithatë, kjo sjellje mund të ndryshohet
dhe elementi mund të detyrohet të rrotullohet në lidhje me
anën e tij, cepin ose fare në lidhje me
pikën që ndodhet jashtë elementit.
Sintaksa
përzgjedhësi {
transform-origin: boshti-X boshti-Y boshti-Z;
}
Vlerat përgjatë boshteve Y dhe Z nuk janë të detyrueshme, ato mund të hiqen (ato do të marrin vlerat e parazgjedhura). Zhvendosja e pikës përgjatë boshtit Z nevojitet për transformimet 3D.
Vlerat për boshtin X
| Vlera | Përshkrimi |
|---|---|
| Njësitë CSS | Vlera janë çdo njësi për madhësi, që përcaktojnë zhvendosjen e qendrës së transformimit nga kufiri i majtë i elementit. Vlera pozitive e zhvendos qendrën e transformimit djathtas (brenda elementit), ndërsa vlera negative - majtas (jashtë elementit) në lidhje me kufirin e majtë të elementit. |
left |
Pika e rrotullimit horizontalisht në kufirin e majtë të elementit. |
right |
Pika e rrotullimit horizontalisht në kufirin e djathtë të elementit. |
center |
Pika e rrotullimit horizontalisht në qendër të elementit. |
Vlera e parazgjedhur: center.
Vlerat për boshtin Y
| Vlera | Përshkrimi |
|---|---|
| Njësitë CSS | Vlera janë çdo njësi për madhësi, që përcaktojnë zhvendosjen e qendrës së transformimit nga kufiri i sipërm i elementit. Vlera pozitive e zhvendos qendrën e transformimit poshtë (brenda elementit), ndërsa vlera negative - lart (jashtë elementit) në lidhje me kufirin e sipërm të elementit. |
top |
Pika e rrotullimit vertikalisht në kufirin e sipërm të elementit. |
bottom |
Pika e rrotullimit vertikalisht në kufirin e poshtëm të elementit. |
center |
Pika e rrotullimit vertikalisht në qendër të elementit. |
Vlera e parazgjedhur: center.
Vlerat për boshtin Z
| Vlera | Përshkrimi |
|---|---|
| Njësitë CSS | Vlera janë çdo njësi për madhësi, që përcaktojnë zhvendosjen e qendrës së transformimit nga rrafshi i elementit. Vlera pozitive e zhvendos atë drejt nesh (larg nga rrafshi i ekranit), ndërsa vlera negative larg nesh. |
Vlera e parazgjedhur: 0px.
Shembull
Tani vlera e vetisë transform-origin nuk është vendosur dhe blloku do të rrotullohet në lidhje me qendrën e tij. Kaloni miun mbi bllok, për të parë efektin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Shembull
Dhe tani kur kaloni miun, blloku do të rrotullohet në lidhje me cepin e sipërm të majtë:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Shembull
Dhe tani kur kaloni miun, blloku do të rrotullohet në lidhje me
cepin e poshtëm të djathtë. Për këtë duhet të vendosni
pikën e transformimit në 100% djathtas
dhe në 100% poshtë (mund të specifikohej
edhe në px, por kur ndryshojnë madhësitë e elementit
pika e transformimit do të mbetet në vend,
prandaj është më mirë të bëhet në %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Shembull
Le ta rrotullojmë bllokun në lidhje me cepin e sipërm të djathtë:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Shembull
Le ta rrotullojmë bllokun në lidhje me qendrën e anës së majtë.
Për këtë për boshtin X do të vendosim left (pika
e rrotullimit do të jetë majtas), ndërsa për boshtin Y - center
(pika e rrotullimit do të jetë në qendër vertikalisht):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Shembull
Vetia mund të specifikohet jo vetëm për rrotullim,
por edhe për transformime të tjera. Le të rrisim
shkallën e zmadhimit duke përdorur scale, duke specifikuar pikën
e transformimit si cepin e poshtëm të majtë:
<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);
}
:
Shembull
Dhe tani le të specifikojmë pikën e transformimit si cepin e sipërm të djathtë:
<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);
}
:
Shembull
Pika e transformimit mund të specifikohet edhe jashtë elementit. Në shembullin vijues, kur kaloni miun mbi bllokun e kuq, blloku i zi do të kryejë rrotullim në lidhje me pikën që ndodhet jashtë:
<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);
}
:
