Transform-origin hassaýaty
transform-origin hassaýaty,
transform hassaýaty bilen kesgitlenýän
elementiň transformasiýalarynyň amala aşarylan nokadyny kesgitleýär.
Adaty ýagdaýda bu nokat - elementiň merkezi,
we, mysal üçin, aýlanma onuň merkezine göra amala aşar.
Emma, bu hereketi üýtgedip, elementiň öz tarapyna,
burçuna ýa-da umuman elementden daşarky ýerde ýatan
nokada göra aýlanmagyna mümkinçilik döretmek bolýar.
Sintaksis
selektor {
transform-origin: X-ok Y-ok Z-ok;
}
Y we Z oklary boýunça bahalar hökmany däl, olar goýberilip bolýar (olar adaty bahalary alarlar). Z oky boýunça nokadyň süýşürmesi 3D transformasiýalar üçin gerek.
X oky üçin bahalar
| Baha | Düşündiriş |
|---|---|
| CSS ölçeg birlikleri | Baha hökmünde elementiň çep ara çäginden transformasiýa merkeziniň aralygyny kesgitlýän ölçegler üçin islendik birlikler hyzmat edýär. Positive baha transformasiýa merkezini saga (elementiň içine) süýşürýär, negative bolsa - çapa (elementden daşary) element ara çägi göre. |
left |
Gorizontal boýunça element ara çägi üçinde aýlanma nokady. |
right |
Gorizontal boýunça element ara çägi üçinde aýlanma nokady. |
center |
Gorizontal boýunça element merkezinde aýlanma nokady. |
Adaty baha: center.
Y oky üçin bahalar
| Baha | Düşündiriş |
|---|---|
| CSS ölçeg birlikleri | Baha hökmünde element ara çägi üçinden transformasiýa merkeziniň aralygyny kesgitlýän ölçegler üçin islendik birlikler hyzmat edýär. Positive baha transformasiýa merkezini aşak (elementiň içine) süýşürýär, negative bolsa - ýokary (elementden daşary) element ara çägi göre. |
top |
Vertikal boýunça element ara çägi üçinde aýlanma nokady. |
bottom |
Vertikal boýunça element ara çägi üçinde aýlanma nokady. |
center |
Vertikal boýunça element merkezinde aýlanma nokady. |
Adaty baha: center.
Z oky boýunça bahalar
| Baha | Düşündiriş |
|---|---|
| CSS ölçeg birlikleri | Baha hökmünde element düzlemi üçinden transformasiýa merkeziniň aralygyny kesgitlýän ölçegler üçin islendik birlikler hyzmat edýär. Positive baha ony bizä (ekran düzleminden) süýşürýär, negative bolsa bizden. |
Adaty baha: 0px.
Mysal
Häzirki wagtda transform-origin hassaýatynyň bahasy kesgitlenmedik we blok öz merkezine göra aýlanar. Effekti görmek üçin çyzygyň üstüne siçan kursoruny getiriň:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Mysal
Indi bolsa çyzyk üstündäsi wagt blok ýokary çep burça göra aýlanar:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Mysal
Indi bolsa çyzyk üstündäsi wagt blok sag
aşak burça göra aýlanar. Bunuň üçin
transformasiýa nokadyny saga 100%
we aşak 100% aralykda ýerleşdirmek gerek
(px hem kesgitlän bolardy, ýöne element ölçegleri üýtgedilende
transformasiýa nokady ýerinde galardy,
şonuň üçin %-da etmek has gowy):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Mysal
Bloky sag ýokary burça göra aýlanalyň:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Mysal
Bloky çep tarapyň merkezine göra aýlanalyň.
Bunuň üçin X oky üçin left (aýlanma nokady
çepde bolar), ýöne Y oky üçin - center
(aýlanma nokady vertikal boýunça merkezde bolar) kesgitläli:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Mysal
Hassaýat diňe aýlanma üçin däl,
başga transformasiýalar üçin hem kesgitlenip bilner.
scale kömegi bilen masştaby ulaldalyň,
transformasiýa nokadyny çep aşak burç hökmünde görkezeliň:
<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);
}
:
Mysal
Indi bolsa transformasiýa nokadyny sag ýokary burç hökmünde görkezeliň:
<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);
}
:
Mysal
Transformasiýa nokadyny elementden daşarda hem kesgitläp bolýar. Indiki mysalda gyzyl blok üstüne siçan kursoruny getirilende gara blok daşarky ýerde ýatan nokada göra aýlanma amala aşar:
<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);
}
:
