Вычислите синус, косинус, тангенс и многое другое с помощью CSS.
Тригонометрические функции
В CSS можно писать математические выражения . В основе лежит функция calc()
для выполнения вычислений, но, скорее всего, вы также слышали о min()
, max()
и clamp()
.
К этим функциям присоединяются тригонометрические функции sin()
, cos()
, tan()
, asin()
, acos()
, atan()
и atan2()
. Эти функции определены в модуле CSS «Значения и единицы измерения» уровня 4 и доступны во всех браузерах.
sin()
, cos()
и tan()
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()
.