CSS-функции математики: Руководство по cos() и sin()

CSS-тригонометрические функции изменили подход к созданию сложных макетов и анимаций без использования JavaScript. Среди этих мощных инструментов cos() и sin() выделяются как незаменимые функции для круговых макетов, волновых паттернов и плавных анимаций.

Понимание CSS cos() и sin() через единичную окружность

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

• cos() возвращает координату X для заданного угла
• sin() возвращает координату Y для заданного угла

Когда вы передаёте угол этим CSS-математическим функциям, они возвращают значения от -1 до 1, представляющие позиции на единичной окружности. Эта математическая зависимость становится основой для создания динамических CSS-макетов.

/* Базовый синтаксис */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* Возвращает ~0.707 */
  --y: sin(var(--angle)); /* Возвращает ~0.707 */
}

Создание круговых макетов с помощью CSS-тригонометрических функций

Одним из наиболее практичных применений CSS-функций cos() и sin() является позиционирование элементов по кругу. Этот метод устраняет необходимость в жёстко заданных позициях или JavaScript-вычислениях.

.circular-menu {
  --radius: 150px;
  --total-items: 6;
}

.menu-item {
  --angle: calc(360deg / var(--total-items) * var(--index));
  transform: 
    translateX(calc(cos(var(--angle)) * var(--radius)))
    translateY(calc(sin(var(--angle)) * var(--radius)));
}

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

Построение волновых паттернов и осциллирующих CSS-анимаций

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

.wave-element {
  --frequency: 2;
  --amplitude: 50px;
  --phase: calc(var(--index) * 30deg);
  
  transform: translateY(
    calc(sin(var(--phase) * var(--frequency)) * var(--amplitude))
  );
}

Для анимированных волн комбинируйте эти функции с пользовательскими CSS-свойствами и анимациями:

@property --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.oscillating {
  --wave: calc(sin(var(--progress) * 360deg) * 100px);
  transform: translateX(var(--wave));
  animation: wave-motion 2s linear infinite;
}

@keyframes wave-motion {
  to { --progress: 1; }
}

Производительность и поддержка браузеров

CSS-математические функции, включая cos() и sin(), теперь имеют базовую поддержку во всех основных браузерах. Эти функции нативно оптимизированы в конвейере рендеринга браузера, обеспечивая лучшую производительность, чем вычисления на JavaScript для CSS-макетов и анимаций.

Ключевые преимущества:

• Отсутствие накладных расходов на выполнение JavaScript
• Вычисления происходят на этапе вычисления стилей
• Автоматический пересчёт при изменении viewport или свойств
• Плавные анимации с частотой 60fps при комбинировании с CSS-трансформациями

Практические советы по реализации

При работе с CSS-тригонометрическими функциями помните об этих лучших практиках:

1. Используйте пользовательские CSS-свойства для повторно используемых значений и упрощения поддержки
2. Комбинируйте с calc() для масштабирования результатов из диапазона единичной окружности от -1 до 1
3. Используйте свойства transform для аппаратно-ускоренных анимаций
4. Учитывайте адаптивные единицы такие как vw или cqi для масштабируемых макетов

/* Адаптивный круговой макет */
.item {
  --responsive-radius: min(40vw, 300px);
  --x: calc(cos(var(--angle)) * var(--responsive-radius));
  --y: calc(sin(var(--angle)) * var(--responsive-radius));
  transform: translate(var(--x), var(--y));
}

Заключение

CSS-функции cos() и sin() привносят математическую точность в веб-макеты без зависимостей от JavaScript. От круговых навигационных меню до плавных волновых анимаций, эти CSS-математические функции предлагают нативную производительность браузера и более чистый, легко поддерживаемый код. По мере того как поддержка браузеров продолжает укрепляться, CSS-тригонометрические функции становятся незаменимыми инструментами для современных CSS-макетов и анимаций.

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..