Trigonometric functions.

Trigonometric calculation functions.

The CSS specification now provides for many calculation functions, including trigonometric calculations. These are interesting for calculating the parameters of a transformation (rotation, scaling, etc.).

Typical trigonometric functions: cos() - sin() - tan()
Inverse trigonometric functions: acos() - asin() - atan() - atan2().

It may also be useful to refer to the page on the CSS angle units.

These features can be used with:

The sin(), cos(), and tan() functions can be used with all the properties that are waiting a unitless numerical value.

The asin(), acos(), atan(), and atan2() functions can be used with all properties that expect an angular value.

Syntax of trigonometric calculation functions.

• <propriété>: sin(30deg); a

  Calculate the sine of a. The value a must be followed by a unit of angle.
  The result is a unitless value, between -1 and 1.

  Some remarkable values:
  sin(0) is 0
sin(30deg) is 0.5
sin(90deg) is 1
  

• <propriété>: cos(30deg); a

  Calculate the cosine of a. As with the previous function, the value a must be followed by a unit of angle.
  The result is a unitless value, between -1 and 1.

  Remarkable values :
  cos(0) is 1
cos(60deg) is 0.5
cos(90deg) is 0
  

• <propriété>: tan(45deg);

  Calculate the tangent of a. As with the previous functions, the value a must be followed by a unit of angle. The result is a unitless value, between -infinity and +infinity.

  Remarkable values:
  tan(0) is 0
tan(45deg) is 1
tan(90deg) is infinity
  

• <propriété>: asin(0.253); n

  Calculates the arc sine of n, which means that asin() finds the angle from the value of its sine, i.e. performs the inverse calculation of sin(). The value n must be a unitless number, between -1 and 1.
  If n is less than -1 or greater than 1, the result will be NaN (Not a Number).

  The angle calculated by the function is expressed in radians and is between -1.5708rad and 1.5708rad, i.e., in degrees: -90deg and 90deg.

• <propriété>: acos(0.124); n

  The function acos(n) calculates the cosine arc of n: acos() finds the angle from the value of its cosine, i.e. performs the inverse calculation of cos(). The value n must be a unitless number, between -1 and 1.

  The calculated angle is expressed in radians and is in the range between 0rad and 3.14159rad, which corresponds in degrees to the range from 0 to 180deg.

• <propriété>: atan(2.212); n

  atan(n) calculates the tangent arc of n, i.e. finds the angle from the value of its tangent: atan() performs the reverse calculation of tan().
  n must be a number without units.

  The result is expressed in radians, and is in the range of -1.5708rad to +1.5708rad or in degrees, from -90deg to +90deg.

• <propriété>: atan2(125px, 150px); y x

  Calculates the angle between the x-axis and a point at the x and y coordinates.
  x and y can be unitless numbers, percentages, or numbers followed by a dimension unit. These different possibilities cannot be mixed: the two values must be expressed in the same unit.

  The result is expressed in radians, and is in the range of -3.14159rad to +3.14159rad, or in degrees, from -180deg to +180deg.

  The calculation performed by atan2(y,x) is equivalent to atan(y/x) but the results of these two expressions can However, be different when x and/or y have negative values or when x is 0.

  x	y	atan(y/x)	atan2(y,x)
  1	1	0,785rad (45deg)	0,785rad (45deg)
  1	-1	-0,785rad (-45deg)	-0,785rad (-45deg)
  -1	1	-0,785rad (-45deg)	2,35rad (135deg)
  -1	-1	0,785rad (45deg)	-2,35rad (-135deg)
  0	1	Error	1,57rad (90deg)

Simulator.

To maintain type compatibility, the trigonometric functions sin(), cos(), and tan() are used with the scale property, while inverse trigonometric functions, which return an angle, are used with the rotates property.

The predefined value pi (180 degrees) is also present, as an example. Notice that cos(pi) returns -1. When scaled this value causes the element to flip.

Browser compatibility and support.

Trigonometric calculation functions are now well handled by all current browsers.

1

cos()
function

2

sin()
function

3

tan()
function

4

acos()
function

5

asin()
function

6

atan()
function

7

atan2()
function

Estimated overall support.

92%

92%

92%

92%

92%

92%

92%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

History of trigonometric functions.

• CSS Values and Units Module Level 4

  Trigonometric calculation functions are introduced in this level 4 of the specification.
  

  August 14, 2018

  Working Draft.

  

  

  

See also: Other calculation functions.

The calculation functions available in CSS are more and more numerous. They cover common mathematical and trigonometric calculations. For a more detailed description of these functions, you can refer to the W3C specification CSS Values and Units Module.

Properties:

⚠

interpolate-size

Determines whether animations or transitions should be abrupt or gradual when a keyword defining an intrinsic dimension is used.

Functions:

abs()

Calculates the absolute value of a number.

acos()

Calculates the angle at which the cosine is equal to the specified value.

asin()

Calculates the angle at which the sine is equal to the specified value.

atan()

Calculates the angle whose tangent is equal to the specified value.

atan2()

Calculates the angle between the x-axis and the line connecting the origin point to the specified point.

attr()

Returns the value of an attribute (standard or custom) from HTML or XML code.

calc()

Performs a calculation. Can be used in place of a value for a property.

⚠

calc-size()

calc-size() allows calculations on the intrinsic dimension of an element (defined by the content).

clamp()

Calculates a value between two extreme values. This function is useful when the units of the parameters are different but of the same type (dimensions, angle...).

exp()

Calculates the exponential of a number.

hypot()

Calculates the square root of a sum of squares of numbers.

⚠

if()

This function allows you to select a value from a proposed list, each value being associated with a condition.

log()

Calculates the logarithm of a number.

max()

Determines the largest value among a series of values.

min()

Determines the smallest value among a series of values.

mod()

Calculates the remainder of the integer division between two numbers.

pow()

Calculates a power boost.

rem()

Calculates the remainder of the integer division between two numbers.

round()

Calculates the rounding of a number.

⚠

sibling-count()

Returns the number of siblings of the element in the document tree, including the element itself.

⚠

sibling-index()

Returns the index of the element among its siblings, that is, among the other elements that have the same parent.

sign()

Determines the sign of a number.

sin()

Calculate the sine of an angle.

sqrt()

Calculates the square root of a number.

⚠

src()

Specifies the address of a resource such as an image for example. Synonym of the url() function.

tan()

Calculates the tangent of an angle.

url()

Specifies the address of a resource such as an image for example.

Values: