CSS Function - acos()

Quiz

The CSS function acos() is a trigonometric operation that calculates the inverse cosine of a value in the range -1 and 1.

This function performs a single calculation and returns the number of radians that represent <angle> between 0 deg and 180 deg.

Possible values

The acos(number) function allows only a single value as a parameter.

number - The calculation returns a <number> in the range -1 to 1.

Return Value

The inverse cosine of a number always returns an <angle> in the range of 0 to 180.

If the number is less than -1 or greater than 1, the result is NaN.
If the number is exactly 1, the result is 0.

Syntax

acos( <calc-sum> )

CSS acos() - Rotate Element

The acos() function can be employed to rotate elements as it yields an <angle>. The following example demonstrates the use of acos().

   
<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      text-align:center;
      font-size:30px;
   }
   div.boxA {
      transform: rotate(asin(1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxB {
      transform: rotate(acos(0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(acos(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(acos(-0.5));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(acos(-1));
      margin-bottom: 20px;
      margin-left:20px;
   }
</style>
</head>
<body>
<div class="box boxA">A</div>
<div class="box boxB">B</div>
<div class="box boxC">C</div>
<div class="box boxD">D</div>
<div class="box boxE">E</div>
</body>
</html>

Print Page