Тригонометричні функції в CSS: математична верстка для сучасного вебдизайну

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

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

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

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

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

Сумісність з браузерами

Тригонометричні функції є відносно новими для CSS, і підтримка браузерами все ще розвивається. Станом на кінець 2023/початок 2024 року, підтримка доступна в більшості сучасних браузерів, включаючи Chrome, Firefox, Safari та Edge. Важливо перевіряти останні таблиці сумісності на вебсайтах, таких як Can I use, перед впровадженням цих функцій у виробництво. Розгляньте можливість використання поліфілу або запасного варіанту для старих браузерів.

Базовий синтаксис

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

property: cos(angle);
property: sin(angle);
property: tan(angle);

Де angle може бути виражений у різних одиницях:

• deg: Градуси (напр., cos(45deg))
• rad: Радіани (напр., sin(0.785rad))
• turn: Оберти (напр., cos(0.125turn) - еквівалентно 45deg)
• grad: Гради (напр., tan(50grad) - еквівалентно 45deg)

Практичне застосування та приклади

1. Розташування по колу

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

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

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
}

/* Використання змінних CSS для кращого контролю */
:root {
  --item-count: 8;
  --radius: 80px;
}

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

.container {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {--angle: 0deg;}
  to {--angle: 360deg;}
}

/* Динамічне позиціонування елементів за допомогою cos() і sin() */
.item:nth-child(n) {
  --index: calc(n - 1);
  --angle-item: calc(var(--index) * (360deg / var(--item-count)));
  left: calc(50% + var(--radius) * cos(var(--angle-item)) - 15px); /* 15px - це половина ширини елемента */
  top: calc(50% + var(--radius) * sin(var(--angle-item)) - 15px); /* 15px - це половина висоти елемента */
}

Пояснення:

• Ми створюємо контейнер з position: relative.
• Кожен елемент у контейнері має position: absolute.
• Ми використовуємо змінні CSS (--item-count, --radius, --angle) для контролю кількості елементів та радіуса кола.
• Властивості left і top кожного елемента розраховуються за допомогою cos() і sin() відповідно. Кут для кожного елемента визначається на основі його індексу.
• Анімація додається до батьківського контейнера, щоб елементи оберталися навколо центру

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

2. Анімації хвиль

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

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

.wave::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background-color: #2ecc71;
  animation: wave-move 5s linear infinite;
}

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

Пояснення:

• Ми створюємо контейнер .wave з overflow: hidden, щоб обрізати ефект хвилі.
• Псевдоелемент ::before представляє саму хвилю.
• Анімація wave-move використовує sin() для створення вертикального коливання хвилі.

Налаштування: Ви можете регулювати тривалість анімації, амплітуду хвилі (значення 5px) та кольори, щоб налаштувати ефект хвилі.

3. Спотворення зображень за допомогою transform: matrix()

Хоча cos(), sin() і tan() не використовуються безпосередньо всередині `transform: matrix()`, ця функція значно виграє від попередньо обчислених значень на основі тригонометричних функцій. Функція `matrix()` дозволяє дуже детально контролювати трансформації, а розуміння математики, що лежить в її основі, дає змогу створювати складні спотворення, що виходять за рамки простих обертань чи масштабування.

.distorted-image {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'); /* Замініть на своє зображення */
  background-size: cover;
  transition: transform 0.3s ease;
}

.distorted-image:hover {
    /*Цей приклад не показує тригонометричні функції безпосередньо в матриці. Однак, при більш просунутому використанні можна було б обчислювати значення матриці за допомогою cos() і sin() на основі позиції миші, положення прокрутки або інших змінних.*/
  transform: matrix(1, 0.2, 0.1, 1, 0, 0); /*Приклад трансформації зсуву*/
}

Пояснення:

• Функція matrix() приймає шість значень, які визначають матрицю 2D-трансформації. Ці значення контролюють масштабування, обертання, нахил та переміщення.
• Ретельно налаштовуючи ці значення, ви можете досягти різноманітних ефектів спотворення. Розуміння лінійної алгебри є корисним для оволодіння функцією matrix.

Просунуте використання (концептуальне):

Уявіть, що значення matrix() обчислюються динамічно на основі положення курсора миші. Коли курсор наближається до зображення, спотворення стає більш вираженим. Для цього знадобиться JavaScript, щоб фіксувати координати миші та обчислювати відповідні значення cos() і sin() для передачі у функцію matrix().

4. Адаптивний дизайн та динамічні макети

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

:root {
  --viewport-width: 100vw;
  --min-radius: 50px;
  --max-radius: 150px;
  --calculated-radius: calc(var(--min-radius) + (var(--max-radius) - var(--min-radius)) * (var(--viewport-width) / 1000)); /* Припускаючи максимальну ширину в'юпорту 1000px */
}

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

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
  left: calc(50% + var(--calculated-radius) * cos(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px - це половина ширини елемента */
  top: calc(50% + var(--calculated-radius) * sin(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px - це половина висоти елемента */
}

Пояснення:

• Ми використовуємо --viewport-width для зберігання поточної ширини в'юпорту.
• --min-radius та --max-radius визначають мінімальний та максимальний радіус кола.
• --calculated-radius динамічно обчислює радіус на основі ширини в'юпорту, використовуючи лінійну інтерполяцію між мінімальним та максимальним радіусом.
• Змініть розмір вікна, щоб побачити зміни

Медіазапити: Ви можете додатково уточнити адаптивну поведінку, використовуючи медіазапити для коригування значень змінних CSS на основі конкретних точок зупину (breakpoints).

Поради та найкращі практики

• Використовуйте змінні CSS: Змінні CSS (кастомні властивості) полегшують керування та оновлення значень, що використовуються в тригонометричних функціях. Це покращує читабельність та підтримуваність коду.
• Оптимізуйте продуктивність: Складні анімації з використанням тригонометричних функцій можуть бути обчислювально інтенсивними. Оптимізуйте свій код, мінімізуючи кількість обчислень та використовуючи апаратне прискорення, де це можливо (напр., за допомогою transform: translateZ(0)).
• Надавайте запасні варіанти (fallbacks): Через різну підтримку браузерами, забезпечте механізми відкату для старих браузерів або середовищ, де тригонометричні функції не підтримуються. Це може включати використання простіших технік CSS або забезпечення плавної деградації візуального ефекту.
• Враховуйте доступність: Переконайтеся, що ваші дизайни доступні для всіх користувачів, включаючи людей з обмеженими можливостями. Уникайте покладання виключно на візуальні ефекти, які можуть бути не сприйняті всіма. Надайте альтернативні способи доступу до інформації та функціональності.
• Ретельно тестуйте: Тестуйте свої дизайни на різних браузерах, пристроях та розмірах екрана, щоб забезпечити послідовну поведінку та позитивний користувацький досвід.

Майбутнє верстки в CSS

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

Висновок

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

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

Не бійтеся експериментувати та досліджувати можливості. Світ математично обґрунтованої верстки CSS величезний і сповнений потенціалу. Вдалого кодування!