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

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

В CSS можно писать математические выражения. В основе лежит функция calc() для выполнения вычислений, но, скорее всего, вы также слышали о min(), max() и clip().

К этим функциям в Chrome 111 присоединяются тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan(), и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4 и доступны во всех браузерах.

Функции CSS sin(), cos(), и tan()

Основные тригонометрические функции:

• cos(): Возвращает косинус угла, значение которого находится в диапазоне от -1 до 1.
• sin(): Возвращает синус угла, значение которого находится в диапазоне от -1 до 1.
• tan(): Возвращает тангенс угла, значение которого находится в диапазоне от -∞ до ∞.

В отличие от своих аналогов в JavaScript, эти функции принимают в качестве аргумента как углы, так и радианы.

В приведённой ниже демонстрации эти функции используются для рисования линий, образующих треугольник, окружающий набор --angle:

• Гипотенуза (жёлтая линия) — это линия, проведённая от центра круга к точке на окружности. Её длинна равна --radius окружности.
• Смежная (красная линия) — это линия из центра круга по оси X. Её длина равна --radius, умноженный на косинус --angle.
• Противоположная (синяя линия) — это линия из центра круга по оси Y. Её длина равна --radius, умноженный на синус --angle.
• Функция tan() параметра --angle используется для рисования зелёной линии от точки к оси Х.

See the Pen

Функции CSS asin(), acos(), atan(), и atan2()

Arc или обратные аналоги sin(), cos() и tan() являются asin(), acos() и atan() соответственно. Эти функции выполняют вычисления в обратном направлении: они принимают числовое значение в качестве аргумента и возвращают соответствующий угол.

И есть функция atan2(), которая принимает два аргумента A и B. Функция возвращает угол между положительной ось X и точкой (B, A).

Примеры

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

Перемещение предметов по круговой траектории вокруг центральной точки

В приведённой ниже демонстрации точки вращаются вокруг центральной точки. Вместо того чтобы вращать каждую точку вокруг своего собственного центра, а затем перемещать её наружу, каждая точка перемещается по осям X и Y. Расстояние по осям X и Y определяются с учётом cos() и, соответственно sin() --angle.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Перемещение по оси X */
             calc(cos(var(--angle)) * var(--radius))

             /* Перемещение по оси Y */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

See the Pen

Чтобы равномерно распределить точки вокруг центральной точки, каждой точке даётся дополнительное смещение, основанное на его nth-child индексе. Например, если есть три точки, расстояние между каждой точкой составляет 120deg (= 360deg / 3).

• Первый дочерний элемент из трёх смещается на 0 x 120deg = 0deg.
• Второй дочерний элемент из трёх получает смещение на 1 x 120deg = 120deg.
• Третий дочерний элемент из трёх получает смещение на 2 x 120deg = 240deg.

Поворот элемента лицом к его исходной точке

CSS функция atan() вычисляет относительный угол от одной точки к другой. Функция принимает два значения, разделённых запятыми, в качестве своих параметров: положение Y и X относительно исходной точки, которая находится в начале координат 0,0.

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

В приведённом ниже примере блоки повёрнуты так, что они обращены к местоположению указателя мыши. Положение указателя мыши синхронизируется с пользовательским свойством через JavaScript.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Размещение элемента внутри родительского элемента */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Поворот так, чтобы элемент был обращён к указателю мыши */
  /* Для этого примите во внимание собственное положение и размер элемента (25 = половина ширины)  */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

See the Pen

Анимированная лента Мёбиуса

Как продемонстрировано в этой Ленте Мёбиуса Аны Тюдор, функции cos() и sin() можно использовать не только для перемещения. Здесь их результаты используются для управления компонентами s и l функции цвета hsl().

See the Pen