Доктайп — канал о фронтенде
Подписаться

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.

Статья дополняется.

abs(x)

Пример использования:

.box {
  --shift: -20px;
  transform: translateX(calc(abs(var(--shift))));
}

Входные данные:
Любое реальное число (x).

Возможные значения:
Положительное число (всегда ≥ 0).

Где использовать в реальной практике:

  • Выравнивание элементов при отрицательных/положительных движениях.
  • Динамическая коррекция расстояний.

Совет:
Очень полезно при анимациях от центра или зеркальных эффектах.

sin(x)

Пример использования:

.ball {
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  from {
    transform: translateY(calc(sin(0) * 50px));
  }
  to {
    transform: translateY(calc(sin(3.1415) * 50px));
  }
}

Входные данные:
Радианы (x в диапазоне 0–2π и далее).

Возможные значения:
От -1 до 1.

Где использовать в реальной практике:

  • Плавные вертикальные колебания.
  • Анимация «плавающих» интерфейсных элементов.

Совет:
Одна полная волна — от 0 до 2π (6.28319).

cos(x)

Пример использования:

.loader {
  transform: rotate(calc(cos(var(--angle)) * 360deg));
}

Входные данные:
Радианы (x).

Возможные значения:
От -1 до 1.

Где использовать в реальной практике:

  • Плавное круговое движение.
  • Построение циклических эффектов.

Совет:
cos(x) можно комбинировать с sin(x) для круговых траекторий.

tan(x)

Пример использования:

.skewed {
  transform: skewX(calc(tan(var(--angle)) * 30deg));
}

Входные данные:
Радианы (x).

Возможные значения:
Теоретически от -∞ до +∞, с разрывами около π/2, 3π/2 и т. д.

Где использовать в реальной практике:

  • Искажения, динамические перспективы.
  • Создание нестабильных резких эффектов.

Совет:
Опасно без ограничений! Тангенс легко уходит в бесконечность.

sqrt(x)

Пример использования:

.grow {
  width: calc(sqrt(var(--progress)) * 100%);
}

Входные данные:
Ненегативное число (x ≥ 0).

Возможные значения:
Ненегативное число (корень из x).

Где использовать в реальной практике:

  • Плавный рост размеров или масштабов.
  • Замедление скорости анимаций.

Совет:
Подходит для эффектов замедленного увеличения или уменьшения.

hypot(x, y)

Пример использования:

.circle {
  --dx: 3;
  --dy: 4;
  width: calc(hypot(var(--dx), var(--dy)) * 10px);
}

Входные данные:
Два или более чисел.

Возможные значения:
Положительное число (длина гипотенузы).

Где использовать в реальной практике:

  • Вычисление расстояния между точками без JS.
  • Масштабирование/появление объектов на основе близости.

Совет:
Мощный инструмент для построения сложных адаптивных сеток.

log(x)

Пример использования:

.bar {
  height: calc(log(var(--value)) * 20px);
}

Входные данные:
Положительное число (x > 0).

Возможные значения:
Любое действительное число (натуральный логарифм).

Где использовать в реальной практике:

  • Логарифмический рост или затухание интерфейсов.
  • Графики данных с большой разницей в масштабах.

Совет:
Не забудьте: log(0) нельзя вычислить, проверяйте входное значение!

exp(x)

Пример использования:

.firework {
  transform: scale(calc(exp(var(--time)) / 10));
}

Входные данные:
Любое реальное число (x).

Возможные значения:
Положительное число (результат экспоненты e^x).

Где использовать в реальной практике:

  • Эффекты «разгона», быстрых вспышек и взрывов.
  • Построение анимаций с ускорением.

Совет:
Экспонента растёт быстрее всех. Ограничивайте диапазоны, чтобы избежать «взрывов» размеров.

Что нужно иметь в виду

Единицы измерения

sin(), cos(), tan() принимают радианы. Для перевода градусов в радианы:
радианы = градусы × (π / 180)

Комбинирование функций

Функции можно вкладывать друг в друга для сложных выражений:

--result: calc(sqrt(abs(var(--x))) + cos(var(--angle)));

@property для анимации

Анимируемые переменные нужно объявлять через @property, чтобы CSS-парсер правильно их интерполировал.

Кроссбраузерность

Функции работают стабильно в Chrome, Firefox, Edge с конца 2024 года. В Safari включение флагов «Experimental Web Platform features» обязательно.

Внимание к математике

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