Функция 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(<число> | <угол>);

Значения

В качестве значения функция 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

См. также