3D karusel
CSS — Aylanuvchi 3D karusel
Bu yerda biz yana bir klassik 3D obyektni qanday yasashni ko‘rsatamiz: Aylanadigan karusel.
HTML tuzilishi
Asosiy HTML tuzilishidan boshlaymiz:
<div class="container">
<div class="carousel">
<div class="card" style="--index:0;">1</div>
<div
class="card" style="--index:1;">2</div>
<div
class="card" style="--index:2;">3</div>
<div
class="card" style="--index:3;">4</div>
<div
class="card" style="--index:4;">5</div>
<div
class="card" style="--index:5;">6</div>
</div>
</div>
container elementi 3D fazoni o‘z ichiga oladi. carousel elementi 3D obyekt ro‘lini o‘ynaydi. Karuselning oltita elementi uchun oltita alohida card elementi ishlatiladi.
CSS uslublash
Avval :root elementida bir nechta o‘zgaruvchi belgilaymiz. Kenglik, balandlik va umumiy elementlar uchun shaxsiy o‘zgaruvchilar yaratamiz. Bu yerda karuselda oltita karta bo‘ladi. Radiusni ham hisoblashimiz kerak.
Radius quyidagi formulaga ega: radius = (width / 2) / tan(360 / quantity / 2).
200px kenglikdagi 6 ta karta uchun: (200 / 2) / tan(360 / 6 / 2) = 100 / 0.577 = ~173px. --radius ni 173px ga belgilaymiz;
:root {
--card-width: 200px;
--card-height: 300px;
--total-items: 6;
--radius: 173px; /* Calculated radius for 6 cards
*/
}
Keyin, 3D konteyner qutisini aniqlaymiz: height, width va margin bilan birga perspective qo‘llang:
.container {
width:
var(--card-width);
height: var(--card-height);
margin:
80px auto;
perspective: 1000px;
}
Endi carousel elementi konteynerining 3D fazosida transformatsiya qilinishi mumkin. width: 100%; va height: 100%; qo‘shamiz. position: relative kartalarni absolyut joylashtirish uchun ishlatiladi. transform-style: preserve-3d bu yerda juda muhim — u bola elementlarni 3D fazoga majbur qiladi. Buning yordamida kartalar 2D tekislikka aylanib qolmaydi. Shuningdek, karuselning uzluksiz aylanishini ishga tushirish uchun CSS animatsiya qo‘shamiz:
.carousel {
width: 100%;
height: 100%;
position: relative;
transform-style:
preserve-3d;
animation: spin 20s infinite linear;
}
Keyin barcha oltita karta uchun asosiy uslublarni qo‘shamiz. Kartalarni 3D fazoda joylashtirish uchun ularning 2D joylashuvini position: absolute bilan qayta belgilash kerak. Keyin har bir kartani aylantirish uchun rotateY(), va silindr chetini hosil qilish uchun uni tashqariga surish uchun translateZ() ishlatamiz:
.card {
position:
absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(to bottom, red, yellow);
color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transform:
rotateY(calc(var(--index) * (360deg /
var(--total-items))))
translateZ(var(--radius));
}
Keyin karuselni aylantirish uchun keyframe animatsiyasini yaratamiz:
@keyframes spin {
from
{ transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
Oxirida ko‘rishni osonlashtirish uchun hover paytida to‘xtatish (pause) yaratamiz:
.carousel:hover {
animation-play-state: paused;
}
Aylanuvchi 3D karuselning to‘liq misoli
Mana aylanuvchi 3D karuselning to‘liq misoli:
Misol
:root {
--card-width: 200px;
--card-height: 200px;
--total-items: 6;
--radius: 173px; /* Calculated radius for 6 cards
*/
}
.container {
width: var(--card-width);
height: var(--card-height);
margin: 80px auto;
perspective: 1000px;
}
.carousel {
width: 100%;
height: 100%;
position: relative;
transform-style:
preserve-3d;
animation: spin 20s infinite linear;
}
.card {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(to bottom, red, yellow);
color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transform:
rotateY(calc(var(--index) * (360deg /
var(--total-items))))
translateZ(var(--radius));
}
@keyframes spin {
from {
transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
.carousel:hover {
animation-play-state: paused;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!