Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada transformatsiyaga eda bo'lgan 3D kartochkalar  hosil qilamiz. Buning uchun biz CSSning ajoyib uslublaridan, HTML va JavaScriptdan foydalanamiz.

 

Keling, avvalo, aniqlashtirib olamiz. Transformatsiya, ya'ni harakatlanish bizga nima uchun kerak? Albatta, saytni yanada chiroyli qilish va foydalanuvchi e'tiborini tortish. Agar bu vazifani uddalash uchun 3D transformatsiyadan foydalansak, maqsadga yanada tezroq yetamiz. 3D transformatsiya, agar to'g'ri ishlatilsa, saytni juda chiroyli qiladi.

Biz bugun 3D formatsiyali kartochkalar shakllantirishni o'rganamiz. Siz ushbu kartochkalarni o'z portfoliongiz yoki boshqa biror saytingiz uchun ishlatishingiz mumkin.

Mana biz shakllantirmoqchi bo'lgan 3D kartochkalar:

3D kartochkalar
3D kartochkalar

 

Qani unda ishga kirishamiz:

Avvalambor, HTML fayl hosil qilamiz. So'ngra qancha miqdorda kartochka kerak bo'lsa shuncha umumiy klasga ega bo'lgan divlar shakllantiramiz va har biriga img elementi orqali rasm kiritamiz. Rasmlarni o'z ichiga olgan divlarni bitta konteyner ichiga olamiz. Xohishga qarab uni ham yana boshqa div ichiga olishingiz mumkin.

HTML:

<div class="section">
  <div class="container">
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
    <div class="card"><img src="..."<!--Rasm url-manzili--> alt=""></div>
  </div>
</div>

 

Keyingi ish CSSda bo'ladi.

Birinchi galda, body uchun umumiy uslublarni beramiz. So'ngra kartochkalarni chiroyli holda joylashtirish uchun konteyner uchun kenglik qiymatini va umumiy, odatdaki uslublarni beramiz. 

body {
  margin: 0;
  background-color: #3d385a;
}
.section  {
  perspective: 1000px;
}
.container {
  width: 680px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: 1s;
  transform: rotateX(55deg) rotateZ(-45deg) rotateY(10deg);
  transform-style: preserve-3d;
}
.container-origin {
  transform: rotate(0);
}
img {
  max-width: 100%;
}
.card {
  width: 200px;
  margin: 10px;
  transition: 0.3s;
}
.card:hover {
  cursor: pointer;
  transform: translateZ(10px);
}

 

Keyin esa konteynerimiz hajmiga qarab kartochkalarning o'lchamlarini aniqlaymiz. Kartochkalar hozircha 2D o'lchamda turibdi:

Kartochkalar 2D formatda
Kartochkalar 2D formatda

Kartochkalar 3D holga keilshi uchun konteynerimizga XYZ o'qlari bo'yicha og'ish burchagini beramiz: transform: rotateX(55deg) rotateZ(-45deg) rotateY(10deg); Transformatsiya ko'zga ko'rinarli bo'lishi uchun transition: 1s;  xossasini kiritamiz. Ha, yana bir narsa: 3D format vizual aniq bo'lishi uchun konteynerning ota-ona elementiga perspective: ... px; xossasini, o'zi uchun transform-style: preserve-3d;  berishni unutmaslik kerak. 

Kartalar quyidagi holga keladi:

3D o'lchovdagi kartalar
3D o'lchovdagi kartalar

Endi esa kartochka ustidan kursor olib o'tilgan, kartochka ajralib chiqish effektini yozamiz. Yana o'sha ma'lum va mashxur :hover psevdoklasidan foydalanamiz. Kursor kartochka hududiga kirgan vaqtda Z o'qi bo'yicha 10px yuqoriga ko'tariladi. 

Endi esa kartochkaga bosilganda yana 2D holatga, yana bosilsa 3D holatga sekingina o'tishini JS orqali yozamiz. Bizda container klasli div bor edi. Endi biz CSS faylda container-origin nomli klas yozib olamiz. container-origin klasiga transormatisyani 0ga tenglashtiramiz. JS manashu konteynerlarni o'zaro almashtiradi va natijada transformatsiya hosil qiladi:

JavaScript:

$('.card').on('click', function() {
    $('.container').toggleClass('container-origin');
})  

 

Endi esa natijani yana bir bor ko'ramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!