CSS types.atan() Function
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;" >w3wiki</ h1 > < h2 >atan() function</ h2 > < div class = "heading heading-1" >w3wiki</ div > < div class = "heading heading-2" >w3wiki</ div > < div class = "heading heading-3" >w3wiki</ div > < div class = "heading heading-4" >w3wiki</ div > < div class = "heading heading-5" >w3wiki</ 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;" >w3wiki</ h1 > < h2 >atan() function</ h2 > < div class = "heading heading-1" >w3wiki</ div > < div class = "heading heading-2" >w3wiki</ div > </ body > </ html > |
Output:
Supported browsers: The browsers supported by atan() function are listed below:
- Firefox 16.0
- Safari
Contact Us