Transform-origin xususiyati
transform-origin xususiyati elementga transform xususiyati orqali belgilanadigan transformatsiyalar sodir bo'ladigan nuqtani belgilaydi.
Standart holatda bu nuqta - elementning markazi,
va, masalan, aylanish uning markazi nisbatan sodir bo'ladi.
Biroq, bu xatti-harakni o'zgartirish mumkin
va elementni o'zining yon tomoni, burchagi yoki umuman elementdan tashqarida joylashgan nuqta nisbatan aylanishiga sabab bo'lish mumkin.
Sintaksis
selector {
transform-origin: X-o'qi Y-o'qi Z-o'qi;
}
Y va Z o'qlari bo'yicha qiymatlar majburiy emas, ularni tashlab ketish mumkin (ular standart qiymatlarni oladi). Z o'qi bo'yicha nuqtani siljitish 3D transformatsiyalar uchun zarur.
X o'qi uchun qiymatlar
| Qiymat | Tavsif |
|---|---|
| CSS o'lchov birliklari | Qiymat sifatida ⁅a href="/uzl/markup/manual/css/reference/units/sizes/">o'lchamlar uchun birliklar⁅/a⁆ ishlatiladi, ular transformatsiya markazini elementning chap chegarasidan siljishini belgilaydi. Musbat qiymat transformatsiya markazini o'ngga (element ichiga) siljitadi, manfiy qiymat esa - chapga (elementdan tashqariga) elementning chap chegarasiga nisbatan. |
left |
Elementning chap chegarasida gorizontal aylanish nuqtasi. |
right |
Elementning o'ng chegarasida gorizontal aylanish nuqtasi. |
center |
Elementning markazida gorizontal aylanish nuqtasi. |
Standart qiymat: center.
Y o'qi uchun qiymatlar
| Qiymat | Tavsif |
|---|---|
| CSS o'lchov birliklari | Qiymat sifatida ⁅a href="/uzl/markup/manual/css/reference/units/sizes/">o'lchamlar uchun birliklar⁅/a⁆ ishlatiladi, ular transformatsiya markazini elementning yuqori chegarasidan siljishini belgilaydi. Musbat qiymat transformatsiya markazini pastga (element ichiga) siljitadi, manfiy qiymat esa - yuqoriga (elementdan tashqariga) elementning yuqori chegarasiga nisbatan. |
top |
Elementning yuqori chegarasida vertikal aylanish nuqtasi. |
bottom |
Elementning pastki chegarasida vertikal aylanish nuqtasi. |
center |
Elementning markazida vertikal aylanish nuqtasi. |
Standart qiymat: center.
Z o'qi uchun qiymatlar
| Qiymat | Tavsif |
|---|---|
| CSS o'lchov birliklari | Qiymat sifatida ⁅a href="/uzl/markup/manual/css/reference/units/sizes/">o'lchamlar uchun birliklar⁅/a⁆ ishlatiladi, ular transformatsiya markazini element tekisligidan siljishini belgilaydi. Musbat qiymat uni biz tomonga (ekran tekisligidan) siljitadi, manfiy qiymat esa bizdan uzoqroqqa. |
Standart qiymat: 0px.
Misol
Hozirda transform-origin xususiyatining qiymati belgilanmagan va blok o'z markazi nisbatan buriladi. Effektni ko'rish uchun sichqonchani blok ustiga olib keling:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Misol
Endi esa sichqoncha olib borilganda blok yuqori chap burchak nisbatan buriladi:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Misol
Endi esa sichqoncha olib borilganda blok o'ng pastki burchak nisbatan buriladi.
Buning uchun transformatsiya nuqtasini 100% o'ngga
va 100% pastga o'tkazish kerak (px da ham belgilash mumkin edi,
lekin element o'lchamlari o'zgarganda transformatsiya nuqtasi o'z joyida qolardi,
shuning uchun % da qilish yaxshiroq):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Misol
Blokni o'ng yuqori burchak nisbatan buramiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Misol
Blokni chap tomon markazi nisbatan buramiz.
Buning uchun X o'qi uchun left (aylanish nuqtasi chapda bo'ladi),
Y o'qi uchun esa center (aylanish nuqtasi vertikal bo'yicha markazda bo'ladi) belgilaymiz:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Misol
Xususiyatni faqat aylanish uchun emas,
balki boshqa transformatsiyalar uchun ham belgilash mumkin.
Keling, scale yordamida masshtabni oshiramiz,
transformatsiya nuqtasini chap pastki burchak sifatida ko'rsatib:
<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);
}
:
Misol
Endi esa transformatsiya nuqtasini o'ng yuqori burchak sifatida ko'rsatamiz:
<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);
}
:
Misol
Transformatsiya nuqtasini elementdan tashqarida ham belgilash mumkin. Quyidagi misolda sichqonchani qizil blok ustiga olib borilganda qora blok tashqarida joylashgan nuqta nisbatan burilishni amalga oshiradi:
<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);
}
:
