Xüsusiyyət transform-origin
transform-origin xüsusiyyəti,
transform xüsusiyyəti ilə təyin olunan
elementin transformasiyalarının baş verdiyi nöqtəni təyin edir.
Susmaya görə bu nöqtə - elementin mərkəzidir,
və, məsələn, fırlanma onun mərkəzinə nisbətən baş verəcək.
Lakin, bu davranışı dəyişmək olar
və elementi öz tərəfinə, küncünə və ya ümumiyyətlə
elementdən kənarda yerləşən nöqtəyə nisbətən fırlatmaq olar.
Sintaksis
selektor {
transform-origin: X-ox Y-ox Z-ox;
}
Y və Z oxları üzrə qiymətlər məcburi deyil, onları buraxa bilərsiniz (susma olaraq qəbul ediləcəklər). Z oxu üzrə nöqtənin yerdəyişməsi 3D transformasiyalar üçün lazımdır.
X oxu üçün qiymətlər
| Qiymət | Təsvir |
|---|---|
| CSS vahidləri | Qiymət kimi istənilən ölçü vahidləri xidmət edir, bu da transformasiya mərkəzinin elementin sol sərhədindən olan məsafəsini təyin edir. Müsbət qiymət transformasiya mərkəzini sağa (elementin daxilinə) sürüşdürür, mənfi qiymət isə sola (elementdən kənara) elementin sol sərhədinə nisbətən sürüşdürür. |
left |
Üfüqi istiqamətdə fırlanma nöqtəsi elementin sol sərhədində. |
right |
Üfüqi istiqamətdə fırlanma nöqtəsi elementin sağ sərhədində. |
center |
Üfüqi istiqamətdə fırlanma nöqtəsi elementin mərkəzində. |
Susma qiyməti: center.
Y oxu üçün qiymətlər
| Qiymət | Təsvir |
|---|---|
| CSS vahidləri | Qiymət kimi istənilən ölçü vahidləri xidmət edir, bu da transformasiya mərkəzinin elementin yuxarı sərhədindən olan məsafəsini təyin edir. Müsbət qiymət transformasiya mərkəzini aşağı (elementin daxilinə) sürüşdürür, mənfi qiymət isə yuxarı (elementdən kənara) elementin yuxarı sərhədinə nisbətən sürüşdürür. |
top |
Şaquli istiqamətdə fırlanma nöqtəsi elementin yuxarı sərhədində. |
bottom |
Şaquli istiqamətdə fırlanma nöqtəsi elementin aşağı sərhədində. |
center |
Şaquli istiqamətdə fırlanma nöqtəsi elementin mərkəzində. |
Susma qiyməti: center.
Z oxu üçün qiymətlər
| Qiymət | Təsvir |
|---|---|
| CSS vahidləri | Qiymət kimi istənilən ölçü vahidləri xidmət edir, bu da transformasiya mərkəzinin elementin müstəvisindən olan məsafəsini təyin edir. Müsbət qiymət onu bizə doğru (ekran müstəvisindən), mənfi qiymət isə bizdən uzağa sürüşdürür. |
Susma qiyməti: 0px.
Nümunə
Hal-hazırda transform-origin xüsusiyyətinin qiyməti təyin olunmayıb və blok öz mərkəzinə nisbətən fırlanacaq. Effekti görmək üçün siçanı blokun üzərinə gətirin:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Nümunə
İndi isə siçanı üzərinə gətirdikdə blok yuxarı sol küncə nisbətən fırlanacaq:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Nümunə
İndi isə siçanı üzərinə gətirdikdə blok sag aşagı küncə nisbətən
fırlanacaq. Bunun üçün transformasiya nöqtəsini sağa 100%
və aşagı 100% qədər yerdəyişmək lazımdır
(px ilə də təyin etmək olardı, lakin elementin ölçüləri dəyişəndə
transformasiya nöqtəsi olduğu yerdə qalardı,
buna görə də % ilə etmək daha yaxşıdır):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Nümunə
Bloku sag yuxarı küncə nisbətən fırladaq:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Nümunə
Bloku sol tərəfin mərkəzinə nisbətən fırladaq.
Bunun üçün X oxu üçün left (fırlanma nöqtəsi
solda olacaq), Y oxu üçün isə center təyin edək
(fırlanma nöqtəsi şaquli olaraq mərkəzdə olacaq):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Nümunə
Xüsusiyyəti yalnız fırlanma üçün deyil,
digər transformasiyalar üçün də təyin etmək olar.
Gəlin scale ilə miqyası artıraq, transformasiya
nöqtəsini sol aşagı künc kimi göstərək:
<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);
}
:
Nümunə
İndi isə transformasiya nöqtəsini sag yuxarı künc kimi göstərək:
<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);
}
:
Nümunə
Transformasiya nöqtəsini elementin xaricində də təyin etmək olar. Aşagıdakı nümunədə siçanı qırmızı blokun üzərinə gətirdikdə qara blok kənarda yerləşən nöqtəyə nisbətən fırlanma həyata keçirəcək:
<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);
}
:
