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>
Advertisements