Тригонометричні функції CSS: опанування математичних розрахунків макета

Тригонометричні функції CSS, а саме sin(), cos() і tan(), докорінно змінили наш підхід до веб-макету. Ці функції, що є частиною більшої сім'ї математичних функцій CSS, пропонують потужний і точний спосіб керувати положенням, розміром і обертанням елементів на веб-сторінці, що призводить до візуально приголомшливих і надзвичайно адаптивних макетів. Ця стаття проведе вас через основи тригонометричних функцій CSS, їх практичне застосування та те, як інтегрувати їх у ваші проєкти для розширеного контролю макета.

Розуміння тригонометричних функцій

Перш ніж зануритися в CSS, давайте коротко розглянемо основні поняття тригонометрії. У прямокутному трикутнику:

• Синус (sin): Відношення довжини сторони, протилежної куту, до довжини гіпотенузи.
• Косинус (cos): Відношення довжини сторони, прилеглої до кута, до довжини гіпотенузи.
• Тангенс (tan): Відношення довжини сторони, протилежної куту, до довжини сторони, прилеглої до кута.

Ці функції приймають кут (зазвичай у радіанах або градусах) як вхідні дані та повертають значення між -1 і 1 (для sin і cos) або будь-яке дійсне число (для tan). CSS використовує ці повернуті значення для виконання обчислень, які впливають на візуальні властивості елементів.

Тригонометричні функції CSS: основи

CSS надає прямий доступ до цих тригонометричних функцій, дозволяючи виконувати обчислення у ваших таблицях стилів. Синтаксис простий:

• sin(angle): Повертає синус кута.
• cos(angle): Повертає косинус кута.
• tan(angle): Повертає тангенс кута.

angle можна вказати в градусах (deg), радіанах (rad), градіанах (grad) або обертах (turn). Важливо бути послідовним у виборі одиниці. Наприклад:

            
.element {
  width: calc(100px * cos(45deg));
  height: calc(100px * sin(45deg));
}

            

              
                Copy
              
            
          

Цей фрагмент коду обчислює ширину та висоту елемента на основі косинуса та синуса 45 градусів відповідно. Результат буде приблизно 70,71 пікселів як для ширини, так і для висоти.

Практичне застосування тригонометричних функцій CSS

Тригонометричні функції CSS відкривають широкий спектр творчих можливостей. Ось деякі практичні застосування:

1. Кругові макети

Створення кругових макетів є класичним випадком використання тригонометричних функцій. Ви можете розташувати елементи навколо центральної точки, використовуючи sin() і cos() для обчислення їх координат x і y.

Приклад: Створення кругового меню

Уявіть, що ви хочете створити кругове меню, де пункти меню розташовані навколо центральної кнопки. Ось як ви можете цього досягти:

            
<div class="menu-container">
  <button class="menu-toggle">Menu</button>
  <button class="menu-item">Item 1</button>
  <button class="menu-item">Item 2</button>
  <button class="menu-item">Item 3</button>
  <button class="menu-item">Item 4</button>
</div>

            

              
                Copy
              
            
          

            
.menu-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.menu-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Initially hide the items */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-container.open .menu-item {
    opacity: 1; /* Make them visible when menu is open */
}

/* Using CSS variables for easy customization */
:root {
    --menu-radius: 80px; /* Radius of the circle */
    --number-of-items: 4; /* Number of menu items */
}

/* Dynamically calculate position using trigonometric functions */
.menu-item:nth-child(2) {
    --angle: calc(360deg / var(--number-of-items) * 0); /*First item starts at 0 degrees*/
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(3) {
    --angle: calc(360deg / var(--number-of-items) * 1);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(4) {
    --angle: calc(360deg / var(--number-of-items) * 2);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(5) {
    --angle: calc(360deg / var(--number-of-items) * 3);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

            

              
                Copy
              
            
          

Цей CSS використовує змінні CSS для визначення радіуса кола та кількості пунктів меню. Властивості left і top обчислюються за допомогою cos() і sin() відповідно, щоб розташувати кожен пункт навколо центральної кнопки. Селектор nth-child дозволяє застосовувати ці обчислення до кожного пункту меню окремо. За допомогою JavaScript ви можете легко додати клас "open" до .menu-container при натисканні та перемикати видимість.

2. Хвилясті анімації

Тригонометричні функції чудово підходять для створення плавних, природних хвилястих анімацій. Маніпулюючи властивістю transform: translateY() за допомогою sin() або cos(), ви можете змусити елементи рухатися вгору та вниз хвилеподібним рухом.

Приклад: Створення хвилястої текстової анімації

Ось як створити хвилясту текстову анімацію, де кожна літера рухається вертикально за синусоїдальною схемою:

            
<div class="wavy-text">
  <span style="--delay: 0.1s">H</span>
  <span style="--delay: 0.2s">e</span>
  <span style="--delay: 0.3s">l</span>
  <span style="--delay: 0.4s">l</span>
  <span style="--delay: 0.5s">o</span>
</div>

            

              
                Copy
              
            
          

            
.wavy-text {
  display: flex;
}

.wavy-text span {
  display: inline-block;
  animation: wave 1s infinite alternate;
  /* Use CSS variables for individual delays */
  animation-delay: var(--delay);
}

@keyframes wave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

            

              
                Copy
              
            
          

            
/* More complex wavy animation using CSS variables and sin() */
@keyframes wave {
    0% {
        transform: translateY(calc(5px * sin(0)));
    }
    100% {
        transform: translateY(calc(5px * sin(360deg)));
    }
}

            

              
                Copy
              
            
          

У цьому прикладі кожна літера обгорнута в елемент span, а змінна CSS --delay використовується для чергування анімації. Ключові кадри wave анімують властивість translateY за допомогою sin(), створюючи плавний хвилястий рух. Результатом є текст з м’якою та привабливою анімацією, що підходить для заголовків, вступів або інтерактивних елементів.

3. Динамічні фігури та візерунки

Тригонометричні функції можна використовувати для динамічного створення складних фігур і візерунків. Поєднуючи їх із градієнтами CSS та іншими властивостями, ви можете створювати унікальні візуальні ефекти.

Приклад: Створення візерунка зірки

Ось як створити візерунок зірки за допомогою градієнтів CSS і тригонометричних функцій:

            
<div class="starburst"></div>

            

              
                Copy
              
            
          

            
.starburst {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.8) 0deg, /* Almost transparent white */
    rgba(255, 255, 255, 0.8) calc(360deg / 16), /* Angle determines number of points */
    transparent calc(360deg / 16),
    transparent calc(360deg / 8) /* Gap between lines */
  );
  border-radius: 50%;
}

            

              
                Copy
              
            
          

Цей код використовує repeating-conic-gradient для створення серії ліній, що виходять із центру. Кути обчислюються для створення симетричного візерунка зірки. Цю техніку можна розширити для створення більш складних і заплутаних дизайнів, маніпулюючи кольорами градієнта, кутами та повторюваними візерунками. Регулювання значення `360deg / 16` змінює кількість точок на зірці, а регулювання кольорів створює різні візуальні стилі.

4. Обертання елементів складними способами

Функція tan(), хоч і рідше використовується безпосередньо для позиціонування, може бути неймовірно корисною, коли вам потрібно отримати кути для обертань на основі відомих довжин сторін. Наприклад, ви можете обернути елемент так, щоб він вказував на певне цільове розташування.

Приклад: Обертання стрілки до курсора миші

У цьому прикладі використовується JavaScript, щоб отримати положення миші, і CSS, щоб обертати елемент стрілки, щоб завжди вказувати на курсор. Це вимагає обчислення кута на основі відносних положень за допомогою арктангенса.

            
<div class="arrow-container">
  <div class="arrow"></div>
</div>

            

              
                Copy
              
            
          

            
.arrow-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid red;
  transform-origin: 50% 0%; /* Rotate around the base */
  transform: translate(-50%, -50%) rotate(0deg); /* Initial rotation */
}

            

              
                Copy
              
            
          

            
// JavaScript to handle the mouse movement and rotation
const arrow = document.querySelector('.arrow');
const arrowContainer = document.querySelector('.arrow-container');

arrowContainer.addEventListener('mousemove', (e) => {
  const containerRect = arrowContainer.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;

  arrow.style.transform = `translate(-50%, -50%) rotate(${angle + 90}deg)`; // Adding 90deg to account for initial arrow direction
});

            

              
                Copy
              
            
          

JavaScript обчислює кут між центром контейнера стрілки та положенням миші за допомогою Math.atan2, який подібний до арктангенса, але правильно обробляє всі квадранти. Потім результат перетворюється в градуси та застосовується як перетворення CSS до стрілки, змушуючи її обертатися та вказувати на курсор. transform-origin встановлено, щоб обертання відбувалося навколо основи стрілки.

Міркування та найкращі практики

• Продуктивність: Складні обчислення можуть вплинути на продуктивність, особливо на старих пристроях. Використовуйте ці функції розсудливо та оптимізуйте свій код, коли це можливо.
• Читабельність: Математичні вирази може бути важко читати. Використовуйте змінні CSS і коментарі, щоб покращити чіткість вашого коду.
• Доступність: Переконайтеся, що ваші дизайни доступні для користувачів з обмеженими можливостями. Не покладайтеся виключно на візуальні ефекти, створені за допомогою тригонометричних функцій; надайте альтернативні способи доступу до тієї самої інформації чи функціональності.
• Сумісність із браузерами: Хоча тригонометричні функції мають хорошу підтримку браузерів, завжди перевіряйте свої дизайни в різних браузерах і на різних пристроях, щоб забезпечити стабільні результати.
• Змінні CSS: Використовуйте змінні CSS, щоб зробити ваш код більш зручним для підтримки та налаштування. Це дозволяє легко регулювати такі параметри, як радіус, кути та зміщення, без необхідності змінювати основні обчислення.
• Одиниці: Пам’ятайте про одиниці, які ви використовуєте (deg, rad, grad, turn), і забезпечте узгодженість у всьому коді.

Глобальні перспективи та випадки використання

Принципи математичного макету застосовуються універсально, але їх реалізація може відрізнятися залежно від культурних і дизайнерських уподобань. Наприклад:

• Мови з написанням справа наліво (RTL): Під час роботи з мовами RTL (наприклад, арабською, івритом) вам може знадобитися відрегулювати кути та напрямки ваших обчислень, щоб переконатися, що макет відображається правильно. Розгляньте можливість використання логічних властивостей (наприклад, start і end замість left і right), щоб забезпечити правильний макет як у середовищах LTR, так і RTL.
• Різні дизайнерські естетики: Дизайнерська естетика значно відрізняється в різних культурах. Хоча кругові макети можуть бути популярними в деяких регіонах, інші можуть віддавати перевагу більш лінійним або сітчастим дизайнам. Адаптуйте використання тригонометричних функцій відповідно до конкретних дизайнерських уподобань вашої цільової аудиторії.
• Міркування щодо доступності: Стандарти та настанови щодо доступності можуть дещо відрізнятися від країни до країни. Переконайтеся, що ваші дизайни відповідають відповідним стандартам доступності на цільових ринках.

Приклад: Адаптація кругового меню для мов RTL

У мові RTL пункти меню в круговому меню, можливо, потрібно буде розташувати у протилежному напрямку. Цього можна досягти, просто інвертувавши кути, які використовуються в тригонометричних обчисленнях, або використовуючи перетворення CSS для дзеркального відображення всього меню.

            
/* Add this to the .menu-container */
.menu-container[dir="rtl"] .menu-item {
    /* Option 1: Flip the calculations */
    /* left: calc(50% - var(--menu-radius) * cos(var(--angle)));  */
    
    /* Option 2: Use transform: scaleX(-1)  */
    transform: translate(-50%, -50%) scaleX(-1); /* Ensure initial translation is accounted for */
}

            

              
                Copy
              
            
          

Висновок

Тригонометричні функції CSS відкривають новий вимір можливостей для веб-дизайнерів і розробників. Розуміючи основи тригонометрії та те, як застосовувати їх у CSS, ви можете створювати візуально приголомшливі, математично точні та надзвичайно адаптивні дизайни. Незалежно від того, чи створюєте ви кругові макети, хвилясті анімації, динамічні фігури чи складні обертання, ці функції надають інструменти, необхідні для розширення меж веб-дизайну та забезпечення захоплюючого досвіду користувачів.

Експериментуйте з цими техніками, досліджуйте різні комбінації тригонометричних функцій і властивостей CSS і відкрийте для себе нескінченний творчий потенціал, який криється в математичних розрахунках макета. Скористайтеся потужністю тригонометричних функцій CSS і підніміть свій веб-дизайн на новий рівень.