tan()

tan() — это функция CSS, которая вычисляет и возвращает тангенс угла. Тангенс — это математическая функция, определяется как отношение противолежащего катета к прилежащему катету прямоугольного треугольника. Подобно синусу и косинусу, тангенс является периодической функцией с диапазоном значений от -∞ до +∞.

Тангенс широко применяется в научных и инженерных вычислениях и является ключевой функцией в тригонометрии для решения задач, связанных с углами и треугольниками. В CSS тангенс и котангенс может использоваться для вычисления размеров элементов после их трансформации. В качестве примера рассмотрим прямоугольный блок (рис. 1), размерами w (ширина) и h (высота).

Прямоугольный блок

Рис. 1. Прямоугольный блок

Применим к блоку трансформацию с функцией skewX(), которая наклоняет элемент по горизонтали под заданным углом. К примеру, для наклона вправо под углом 30 градусов используем следующий код CSS:

transform: skew(-30deg);

Вот что получится в итоге.

Вид элемента после использования функции skewX()

Рис. 2. Вид элемента после использования функции skewX()

После трансформации, ширина нашего элемента увеличилась на значение x (рис. 3), которое вычисляется через тангенс угла.

Ширина элемента изменилась на величину x

Рис. 3. Ширина элемента изменилась на величину x

x = h × tg(α)

Таким образом, новая ширина элемента wнов стала следующей:

wнов = w + h × tg(α)

Для примера возьмём блок размерами 200х50 пикселей и наклоним его через skewX() на 30°. Новая ширина по формуле получится следующей:

w = 200 + 50 × tg(30) = 229

В итоге блок станет шириной 229 пикселей.

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

w = wнов - h × tg(α)

Указываем требуемое значение новой ширины wнов и получаем величину для свойства width. К примеру, если нам нужна конечная ширина 200 пикселей, то после вычисления получаем исходную ширину 171 пиксель.

200 – 50 × tg(30) = 171

Вместо вычислений в CSS допустимо использовать формулы, подставляя переменные через var() и функцию tan().

width: calc(var(--w) - var(--h) * tan(var(--d)));

Синтаксис

tan(<число> | <угол>);
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

В качестве значения функция tan() принимает углы или числа, которые затем переводятся в радианы. Поэтому допустимо указывать углы в разных форматах, как показано в табл. 1.

Табл. 1. Значения функции tan()
Значение CSS Значение в радианах Результат tan()
0 0 0
30deg 0.5236 0.5773
45deg 0.7854 1
60deg 1.0472 1.7321
90deg 1.5708 Не определён
180deg 3.1416 0
270deg 4,7124 Не определён
-30deg -0.5236 -0.5774
0.5turn 3.1416 0
1turn 6.2832 0
4 4 1.1578
0.5 0.5 0.5463
pi / 4 0.7854 1

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tan()</title> <style> .skew { --w: 200px; /* Ширина после трансформации */ --h: 50px; /* Высота элемента */ --d: 30deg; /* Угол наклона */ --w0: calc(var(--w) - var(--h) * tan(var(--d))); width: var(--w0); /* Ширина элемента */ height: var(--h); /* Высота элемента */ transform: skewX(var(--d)); /* Наклон */ margin-left: 30px; /* Сдвигаем вправо */ background-color: darkcyan; /* Цвет фона */ } </style> </head> <body> <div class="skew"></div> </body> </html>

В данном примере нужно получить определённую ширину (200 пикселей) после трансформации. Для этого с помощью тангенса проводятся вычисления и получаем исходную ширину, которая подставляется в качестве значений свойства width. Для наглядности вместо конкретных чисел применяются переменные CSS (--w, --h и др.).

Спецификация

Спецификация Статус
CSS Values and Units Module Level 4 Редакторский черновик

Браузеры

111 111 97 15.4 108
111 108 15.4

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также