Функция acos()

Стилевая функция acos(), также известная как арккосинус или обратный косинус, является одной из основных тригонометрических функций. Она определена как угол в радианах, чей косинус равен заданному значению.

Математически, функция acos() возвращает значение угла α в диапазоне 0 ≤ α ≤ π, для которого cos(α) = x, при -1 ≤ x ≤ 1. К примеру, для угла α = 60° или в радианах 60 × π/180 = 1,0472 рад:

cos(60deg) = cos(1.0472) = 0.5

acos(0.5) = 60deg = 1.0472

Синтаксис

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

Значения

В качестве значения функция acos() принимает число в диапазоне [-1; 1]. Значение, не входящее в этот диапазон, например, число 2, возвращает NaN. В табл. 1 показаны некоторые значения acos().

Табл. 1. Значения функции acos()
Значение CSS Значение в градусах Результат acos()
1 0 1
0.866 30deg 0.5236
0.7071 45deg 0.7854
0.5 60deg 1.0472
0 90deg 1.5708
-1 180deg 3.1416
-0.866 -30deg 2.6179
-2 NaN

В значении acos() допустимо использовать следующие знаки математических операций:

  • сложение (+) — acos(0.4 + 0.5);
  • вычитание (-) — acos(1.4 - 0.5);
  • умножение (*) — acos(0.4 * 2);
  • деление (/) — acos(1.8 / 2).

А также ключевое слово pi, которое можно подставлять вместо значения π — acos(30 * pi / 180).

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>acos()</title> <style> .rotate { transform: rotate(acos(0.8)); /* Поворот изображения */ } </style> </head> <body> <img src="image/thumb3.jpg" class="rotate" alt=""> </body> </html>

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

CSS Values and Units Module Level 4

Браузеры

111 111 97 15.4 108
111 108 15.4

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

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

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