Theacos()CSSfunction is a trigonometric function that returns the inverse cosine of a number between-1 and1. The function contains a single calculation that returns the number of radians representing an<angle> between0deg and180deg.

Syntax

/* Single <number> values */transform: rotate(acos(-0.2));transform: rotate(acos(2 * 0.125));/* Other values */transform: rotate(acos(pi / 5));transform: rotate(acos(e / 3));

Parameters

Theacos(number) function accepts only one value as its parameter.

number

A calculation which resolves to a<number> between-1 and1.

Return value

The inverse cosine of anumber will always return an<angle> between0deg and180deg.

• Ifnumber is less than-1 or greater than1, the result isNaN.
• Ifnumber is exactly1, the result is0.

Formal syntax

<acos()> =
acos(<calc-sum>)

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Examples

Rotate elements

Theacos() function can be used torotate elements as it return an<angle>.

HTML

<div></div><div></div><div></div><div></div><div></div>

CSS

body {  height: 100vh;  display: flex;  justify-content: center;  align-items: center;  gap: 50px;}

div.box {  width: 100px;  height: 100px;  background: linear-gradient(orange, red);}div.box-1 {  transform: rotate(acos(1));}div.box-2 {  transform: rotate(acos(0.5));}div.box-3 {  transform: rotate(acos(0));}div.box-4 {  transform: rotate(acos(-0.5));}div.box-5 {  transform: rotate(acos(-1));}

Result

Specifications

Browser compatibility

See also

• sin()
• cos()
• tan()
• asin()
• atan()
• atan2()