⌘K

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

cssselector {
  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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="hover"></div>
<div id="elem"></div>
css#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);
}

Результат:

BackTransform xususiyatiNextFunktsiya rotate