M

MLOG

O'zbek

Murakkab, dinamik va matematik jihatdan aniq maketlar yaratish uchun CSS trigonometrik funksiyalari (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) imkoniyatlarini o'rganing. Amaliy misollar va kod parchalari bilan tanishing.

CSS Trigonometrik Funksiyalari: Dinamik Dizaynlar uchun Matematik Maket Hisob-kitoblari

An'anaviy ravishda statik elementlarni uslublash uchun tanilgan CSS, dinamik va adaptiv veb-dizayn uchun kuchli vositalarni taklif qilish darajasiga yetdi. Bular qatoriga trigonometrik funksiyalar kiradi, ular ishlab chiquvchilarga matematik prinsiplarni to'g'ridan-to'g'ri o'zlarining CSS-larida qo'llash imkonini beradi. Ushbu maqolada murakkab, dinamik va matematik jihatdan aniq maketlarni yaratish uchun `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` va `atan2()` funksiyalaridan qanday foydalanish ko'rib chiqiladi.

CSS Trigonometrik Funksiyalarini Tushunish

CSS-dagi trigonometrik funksiyalar burchaklarga asoslangan hisob-kitoblarni amalga oshirishga imkon beradi, natijada olingan qiymatlar `transform`, `width`, `height` kabi turli CSS xususiyatlari uchun ishlatilishi mumkin. Bu dumaloq maketlar, murakkab animatsiyalar va turli ekran o'lchamlariga matematik tarzda moslashadigan adaptiv dizaynlar yaratish uchun imkoniyatlar ochadi.

Asosiy Funksiyalar: sin(), cos(), va tan()

Bu funksiyalar trigonometrik hisob-kitoblarning asosidir:

Teskari Trigonometrik Funksiyalar: asin(), acos(), atan(), va atan2()

Teskari trigonometrik funksiyalar ma'lum bir nisbat asosida burchakni hisoblash imkonini beradi:

Amaliy Qo'llanilishlar va Misollar

Keling, CSS trigonometrik funksiyalarining bir nechta amaliy qo'llanilishini ko'rib chiqaylik.

1. Dumaloq Maket Yaratish

Eng keng tarqalgan holatlardan biri bu elementlarni aylana shaklida joylashtirishdir. Bunga har bir elementning pozitsiyasini uning indeksi va elementlarning umumiy soniga qarab hisoblash orqali erishish mumkin, bunda `sin()` va `cos()` yordamida aylana markaziga nisbatan x va y koordinatalari aniqlanadi.

HTML:

<div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>

CSS:

.circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

Ushbu misolda biz har bir `.item` elementining pozitsiyasini `sin()` va `cos()` yordamida hisoblaymiz. Burchak 360 gradusni elementlar soniga (5) bo'lish va uni elementning indeksiga ko'paytirish orqali aniqlanadi. Olingan `sin()` va `cos()` qiymatlari `top` va `left` pozitsiyalarini hisoblash uchun ishlatiladi, bu esa elementlarni samarali ravishda dumaloq shaklda joylashtiradi. `85px` qiymati aylana radiusini, `15px` esa element o'lchami uchun ofsetni bildiradi.

2. To'lqinsimon Animatsiyalar Yaratish

Trigonometrik funksiyalar silliq, to'lqinsimon animatsiyalarni yaratish uchun juda mos keladi. Siz `sin()` yoki `cos()` yordamida vaqt o'tishi bilan elementning pozitsiyasi, shaffofligi yoki boshqa xususiyatlarini o'zgartirishingiz mumkin.

HTML:

<div class="wave-container">
 <div class="wave-item"></div>
</div>

CSS:

.wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

Ushbu misolda `wave` animatsiyasi `.wave-item` elementining vertikal pozitsiyasini (`translateY`) hisoblash uchun `sin()` dan foydalanadi. Animatsiya davom etar ekan, sinus qiymati o'zgarib, silliq, tebranuvchi to'lqin effektini yaratadi. `translateX` esa to'lqinning uzluksiz harakatini ta'minlaydi.

3. Adaptiv Yoy va Egri Chiziqlar Yaratish

CSS trigonometrik funksiyalarini viewport birliklari (`vw` va `vh` kabi) bilan birlashtirib, turli ekran o'lchamlariga moslashadigan adaptiv yoylar va egri chiziqlar yaratish mumkin.

HTML:

<div class="arc-container">
 <div class="arc-element"></div>
</div>

CSS:

.arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

Bu misolda biz `.arc-element` ni yoy bo'ylab joylashtirish uchun maxsus CSS xususiyatlari (`--angle`) va trigonometrik funksiyalardan foydalanamiz. `left` va `top` xususiyatlari `arc` animatsiyasi orqali vaqt o'tishi bilan o'zgaradigan burchak bilan mos ravishda `cos()` va `sin()` asosida hisoblanadi. Viewport birliklari (`vw` va `vh`) yoyning ekran o'lchamiga mutanosib ravishda moslashishini ta'minlaydi.

4. `atan2()` yordamida Burchaklarni Hisoblash

`atan2()` ikki nuqta orasidagi burchakni aniqlay oladi, bu esa elementlarning bir-birining pozitsiyasiga reaksiya ko'rsatadigan effektlarni yaratish uchun foydalidir.

Ikki element mavjud bo'lgan va siz ulardan birini doimo ikkinchisiga qarab turadigan qilib aylantirmoqchi bo'lgan stsenariyni ko'rib chiqing:

HTML:

<div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>

CSS (JavaScript bilan):

.container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* To'g'ri aylanish uchun muhim */
}

JavaScript:

const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

Bu misolda JavaScript sichqoncha koordinatalarini konteynerga nisbatan olish uchun ishlatiladi. `Math.atan2()` konteyner markazi (boshlang'ich nuqta sifatida) va sichqoncha pozitsiyasi orasidagi burchakni hisoblaydi. Keyin bu burchak `.pointer` elementini aylantirish uchun ishlatiladi, bu uning doimo sichqoncha kursoriga qarab turishini ta'minlaydi. `transform-origin: left center;` ko'rsatgichning chap markaziy nuqtasi atrofida to'g'ri aylanishini ta'minlash uchun juda muhim.

CSS da Trigonometrik Funksiyalardan Foydalanishning Afzalliklari

E'tiborga Olinadigan Jihatlar va Eng Yaxshi Amaliyotlar

Xulosa

CSS trigonometrik funksiyalari dinamik, adaptiv va matematik jihatdan aniq veb-dizaynlarni yaratish uchun kuchli vositalar to'plamini taqdim etadi. Ushbu funksiyalarni tushunish va ulardan foydalanish orqali ishlab chiquvchilar maket, animatsiya va interaktiv elementlar uchun yangi imkoniyatlarni ochib, foydalanuvchi tajribasini sezilarli darajada yaxshilashlari mumkin. Dumaloq maketlar va to'lqinsimon animatsiyalardan tortib, adaptiv yoylar va elementlarni joylashtirishgacha, qo'llanilish sohalari keng va xilma-xildir. Brauzer mosligi, samaradorlik va o'qilishi osonligini diqqat bilan ko'rib chiqish muhim bo'lsa-da, trigonometrik funksiyalarni CSS ish jarayoniga kiritishning afzalliklari shubhasizdir, bu sizga haqiqatan ham jozibali va murakkab veb-tajribalarni yaratishga imkon beradi. CSS rivojlanishda davom etar ekan, ushbu texnikalarni o'zlashtirish butun dunyodagi veb-dizaynerlar va ishlab chiquvchilar uchun tobora qimmatli bo'lib boradi.

Ushbu bilimlar yanada murakkab va vizual jihatdan jozibali dizaynlarni yaratishga imkon beradi. Veb-ishlab chiqish loyihalaringizda CSS trigonometrik funksiyalarining to'liq salohiyatini ochish uchun ushbu texnikalarni o'rganing va turli parametrlar bilan tajriba qilib ko'ring.