CSS Function - atan2()

The CSS function atan2() is a trigonometric operation that computes the inverse tangent of two values in the range of -infinity and infinity.

This function takes two arguments and returns the number of radians representing an <angle> between -180° and 180°.

Possible values

The function atan2(y, x) takes two values separated by a comma as parameters. Each value can be a <number>, a <dimension>, or a <percentage>.

Both values must be of the same type, but if they are <dimension>, they can also have different units.

  • y-coordinate - The y-coordinate of the point. A calculation that results in a <number>, a <dimension>, or a <percentage>.

  • x-coordinate - The x-coordinate of the point. A calculation that results in a <number>, a <dimension>, or a <percentage>.

Return value

The atan2(y, x) function takes two given values, x and y, and uses them to compute and return the <angle> between the positive x-axis and the line from the origin to the coordinate point (x, y).

Syntax

atan2( <calc-sum>,  <calc-sum> )

CSS atan2() - Rotate Element

The atan2() function can be utilized to rotate elements as it produces an <angle>. The following example demonstrates the usage of atan2() to rotate boxes

 
<html>
<head>
<style>
   div.box {
      width: 100px;
      height: 100px;
      background: skyblue;
      font-size:25px;
   }
   div.boxA {
      transform: rotate(atan2(2, 4));
      margin-left: 20px;
      margin-bottom:30px;
   }
   div.boxB {
      transform: rotate(atan2(4%, -5%));
      margin-left: 20px;
      margin-bottom: 40px;
   }
   div.boxC {
      transform: rotate(atan2(-2, 1.5));
      margin-left: 20px;
      margin-bottom: 35px;
   }
   div.boxD {
      transform: rotate(atan2(2, 3.5));
      margin-left: 20px;
      margin-bottom: 30px;
   }
</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>
</body>
</html>
Advertisements