CSS Function - atan()

The CSS function atan() is a trigonometric operation that returns the inverse tangent of a value between negative and positive infinity.

This function calculates the angle in radians, which is a <angle> value in the range of -90 degrees to 90 degrees, with a single calculation.

Possible values

The function atan(number) accepts a single value as a parameter.

number - A calculation that results in a value in the range from - and +.

Return Value

The inverse tangent of any number always gives a <angle> that falls within the range of -90deg to 90deg.

If number is 0, the result is 0.
If number is + the result is 90deg.
If number is - the result is -90deg.

That is

atan(-infinity) represents -90deg.
atan(-1) represents -45deg.
atan(0) represents 0deg.
atan(1) represents 45deg.
atan(infinity) represents 90deg.

Syntax

atan( <calc-sum> )

CSS atan() - Rotate Element

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

  
<html>
<head>
<style>
   div.box {
   width: 80px;
   height: 80px;
   background:  red;
   font-size: 25px;
   }
   div.boxA {
      transform: rotate(atan(-99999));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxB {
      transform: rotate(atan(-1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxC {
      transform: rotate(atan(0));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxD {
      transform: rotate(atan(1));
      margin-bottom: 20px;
      margin-left:20px;
   }
   div.boxE {
      transform: rotate(atan(99999));
      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>