3D kub

CSS — Aylanuvchi 3D kub

Bu yerda biz yana bir klassik 3D obyektni qanday yasashni ko‘rsatamiz: aylanadigan kub.

Old tomon

Orqa tomon

O‘ng

Chap

top

bottom

HTML tuzilishi

Asosiy HTML tuzilishidan boshlaymiz:

<div class="container">
<div class="cube">
    <div class="face front">front</div>
    <div class="face back">back</div>
    <div class="face right">right</div>
    <div class="face left">left</div>
    <div class="face top">top</div>
    <div class="face bottom">bottom</div>
</div>
</div>

container elementi 3D fazoni o‘z ichiga oladi. cube elementi 3D obyekt ro‘lini o‘ynaydi. Kubning oltita yuzi uchun (old, orqa, o‘ng, chap, yuqori va past) oltita alohida face elementi ishlatiladi.

CSS uslublash

Avval, 3D konteyner qutisini aniqlaymiz: height, width va margin bilan birga perspective qo‘llang:

.container {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 600px;
}

Endi cube elementi konteynerining 3D fazosida transformatsiya qilinishi mumkin. width: 100%; va height: 100%; qo‘shamiz. position: relative kub 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, kubning uzluksiz aylanishini ishga tushirish uchun CSS animatsiya qo‘shamiz:

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: spin 12s infinite linear;
}

Keyin kubning barcha oltita yuzi uchun asosiy uslublarni qo‘shamiz. Yuzlarni 3D fazoda joylashtirish uchun ularning 2D joylashuvini position: absolute bilan qayta belgilash kerak. Chuqurlikni kuzatish uchun shaffof qizil fon rangi ham qo‘shamiz:

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
line-height: 200px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: white;
background: rgba(255, 0, 0, 0.5);
}

Keyinchalik, har bir yuzni 3D maydonida alohida joylashtirishimiz kerak. 200px kubni nazarda tutsak, har bir yuz markazdan 100px ni aylantiradi:

.front { transform: rotateY( 0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

Oxirida kubni aylantirish uchun keyframe animatsiyasini yaratamiz:

@keyframes spin {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}

Aylanuvchi 3D kubning to‘liq misoli

Mana aylanuvchi 3D kubning to‘liq misoli:

Misol

.container {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: spin 12s infinite linear;
}

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
line-height: 200px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: white;
background: rgba(255, 0, 0, 0.5);
}

.front { transform: rotateY( 0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes spin {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish