CSS types.atan() Function
Last Updated :
03 Feb, 2023
The trigonometric atan() CSS function returns the inverse tangent of a value between -∞ and +∞. The single calculation in the function returns the number of radians that correspond to an angle between -90deg and 90deg.
Syntax:
/* numeric values */
transform: rotate(atan(-0.9));
transform: rotate(atan(1));
/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e / 4));
Parameter: This function takes the following parameters:
- number: This is the numeric value translated from -∞ to +∞.
Return Value: The inverse tan of a number will always return an angle between -90deg and 90deg.
- If number is 0⁻, the result is 0⁻.
- If number is +∞ the result is 90deg.
- If number is -∞ the result is -90deg.
Example 1: Let's take an example to understand how the atan() function works.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan(0.1));
}
div.heading-2 {
transform: rotate(atan(0.2));
}
div.heading-3 {
transform: rotate(atan(1));
}
div.heading-4 {
transform: rotate(atan(-0.2));
}
div.heading-5 {
transform: rotate(atan(-0.1));
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>atan() function</h2>
<div class="heading heading-1">GeeksforGeeks</div>
<div class="heading heading-2">GeeksforGeeks</div>
<div class="heading heading-3">GeeksforGeeks</div>
<div class="heading heading-4">GeeksforGeeks</div>
<div class="heading heading-5">GeeksforGeeks</div>
</body>
</html>
Output:
Example 2: Let's take an example to understand how the atan() function works using pi and e values.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan(pi/8));
}
div.heading-2 {
transform: rotate(atan(e/5));
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>atan() function</h2>
<div class="heading heading-1">GeeksforGeeks</div>
<div class="heading heading-2">GeeksforGeeks</div>
</body>
</html>
Output:
Supported browsers: The browsers supported by atan() function are listed below: