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

sin(), cos() и tan() 

Основными “тригонометрическими функциями” являются:

• cos(): Возвращает косинус угла, который является значением между -1 и 1.
• sin(): Возвращает синус угла, который является значением между -1 и 1.
• tan(): Возвращает тангенс угла, который является значением между −∞ и +∞.

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

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

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

https://codepen.io/web-dot-dev/pen/NWLxROo

asin(), acos(), atan() и atan2() 

Аналогами “arc” или “inverse” для 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: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

https://codepen.io/web-dot-dev/pen/ExePgOg

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

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

Поверните элемент так, чтобы он был обращен к началу координат 

atan2()Функция вычисляет относительный угол между одной точкой и другой. Функция принимает в качестве своих параметров два значения, разделенных запятыми: y и x положение другой точки относительно исходной точки, которая находится в начале координат 0,0.

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

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

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

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

https://codepen.io/web-dot-dev/pen/dyqGpQV

Источник: https://web.dev/css-trig-functions/