3D kartani aylantirish
CSS karta aylantirish
Bu yerda biz klassik 3D obyektni qanday yasashni ko‘rsatamiz: Kartani aylantirish.
Old tomon
Orqa tomon
HTML tuzilishi
Asosiy HTML’dan boshlaymiz:
<div class="container">
<div class="card">
<div class="face front"><h2>Front</h2></div>
<div
class="face back"><h2>Back</h2></div>
</div>
</div>
container elementi 3D fazoni o‘z ichiga oladi. card elementi 3D obyekt ro‘lini o‘ynaydi. Kartaning old va orqa yuzlari uchun ikkita alohida face elementi ishlatiladi.
CSS uslublash
Avval, 3D konteyner qutisini aniqlaymiz: height va width bilan birga perspective qo‘llang:
.container {
width: 200px;
height: 250px;
perspective: 600px;
}
Endi card elementi konteynerining 3D fazosida transformatsiya qilinishi mumkin. width: 100%; va height: 100%; qo‘shamiz. position: relative kartaning yuzlarini absolyut joylashtirish uchun ishlatiladi. transform-style: preserve-3d bu yerda juda muhim — u bola elementlarni 3D fazoga majbur qiladi. Buning yordamida yuzlar 2D tekislikka aylanib qolmaydi. Shuningdek, foydalanuvchilar transformatsiya effekti ko‘rsin uchun CSS transition qo‘shamiz:
.card {
width: 100%;
height: 100%;
position:
relative;
transition: transform 1s;
transform-style:
preserve-3d;
}
Keyin ikkala karta yuzi uchun asosiy uslublarni qo‘shamiz. Yuzlarni 3D fazoda joylashtirish uchun ularning 2D joylashuvini position: absolute bilan qayta belgilash kerak. Yuzlar tomoshabindan uzoq bo‘lganda ularning orqa tomonini yashirish uchun backface-visibility: hidden ishlatamiz:
.face {
position: absolute;
height: 100%;
width:
100%;
backface-visibility: hidden;
text-align: center;
}
Keyin old va orqa yuzlarni uslublab, orqa yuzga rotateY(180deg) asosiy 3D transformatsiyasini qo‘shamiz:
.front {
background: green;
}
.back {
background: red;
transform: rotateY(180deg);
}
Old va orqa yuzlar tayyor bo‘lgach, .card aylantirilgandagi holat uchun uslub talab qiladi. Bu yerda sichqoncha konteyner ustiga olib borilganda gorizontal aylantirish amalga oshiriladi:
.container:hover .card {
transform: rotateY(180deg);
}
Karta aylantirishning to‘liq misoli
Mana karta aylantirishning to‘liq misoli:
Misol
.container {
width: 200px;
height: 250px;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
position:
relative;
transition: transform 1s;
transform-style:
preserve-3d;
}
.face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
text-align: center;
}
.front {
background: green;
}
.back {
background: red;
transform: rotateY(180deg);
}
.container:hover .card {
transform: rotateY(180deg);
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!