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

Вычислите синус, косинус, тангенс и многое другое с помощью CSS.

Bramus

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

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

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

sin() , cos() и tan()

Три основные триггерные функции:

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

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

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

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

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

Дуговыми или обратными аналогами 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)
  ;
}

Чтобы равномерно распределить точки вокруг центральной точки, каждой точке присваивается дополнительное смещение, основанное на индексе ее 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)
          );
}

Главное событие сообщества

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