Les fonctions trigonométriques.

Les fonctions de calcul trigonométrique.

La spécification CSS prévoit maintenant de nombreuses fonctions de calculs, dont les calculs trigonométriques. Ceux-ci sont intéressants pour calculer par exemple les paramètres d'une transformation (rotation, mise à l'échelle...).

Fonctions trigonométriques habituelles : cos() - sin() - tan()
Fonctions trigonométriques inverses : acos() - asin() - atan() - atan2().

Il peut être utile également de se reporter à la page sur les unités d'angle.

Ces fonctions peuvent être utilisées avec :

Les fonctions sin(), cos() et tan() peuvent être utilisées avec toutes les propriétés qui attendent une valeur numérique sans unité.

Les fonctions asin(), acos(), atan() et atan2() peuvent être utilisées avec toutes les propriétés qui attendent une valeur angulaire.

Syntaxe des fonctions de calcul trigonométrique.

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

Calcule le sinus de a. La valeur a doit être suivi d'une unité d'angle.
Le résultat est une valeur sans unité, comprise entre -1 et 1.

Quelques valeurs remarquables :
sin(0) vaut 0
sin(30deg) vaut 0.5
sin(90deg) vaut 1
<propriété>: cos(30deg); a

Calcule le cosinus de a. Comme pour la fonction précédente, la valeur a doit être suivie d'une unité d'angle.
Le résultat est une valeur sans unité, comprise entre -1 et 1.

Valeurs remarquables :
cos(0) vaut 1
cos(60deg) vaut 0.5
cos(90deg) vaut 0
<propriété>: tan(45deg);

Calcule le tangente de a. Comme pour les fonctions précédentes, la valeur a doit être suivie d'une unité d'angle. Le résultat est une valeur sans unité, comprise entre -infinity et +infinity.

Valeurs remarquables :
tan(0) vaut 0
tan(45deg) vaut 1
tan(90deg) vaut infinity
<propriété>: asin(0.253); n

Calcule l'arc sinus de n, ce qui veut dire que asin() retrouve l'angle à partir de la valeur de son sinus, c'est à dire effectue le calcul inverse de sin(). La valeur n doit être un nombre sans unité, compris entre -1 et 1.
Si n est inférieur à -1 ou supérieur à 1, la résultat sera NaN (Not a Number).

L'angle calculé par la fonction est exprimé en radians et se situe entre -1,5708rad et 1,5708rad, soit, en degrés : -90deg et 90deg.
<propriété>: acos(0.124); n

La fonction acos(n) calcule l'arc cosinus de n : acos() retrouve l'angle à partir de la valeur de son cosinus, c'est à dire effectue le calcul inverse de cos(). La valeur n doit être un nombre sans unité, compris entre -1 et 1.

L'angle calculé est exprimé en radians et se situe dans l'intervalle entre 0rad et 3,14159rad, ce qui correspond en degrés à la plage de 0 à 180deg.
<propriété>: atan(2.212); n

atan(n) calcule l'arc tangente de n, c'est à dire retrouve l'angle à partir de la valeur de sa tangente : atan() effectue le calcul inverse de tan().
n doit être un nombre sans unité.

Le résultat est exprimé en radians, et situe dans l'intervalle de -1,5708rad à +1,5708rad soit en degrés, de -90deg à +90deg.

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

Arc Tangente 2 Calcule l'angle compris entre l'axe des abscisses et un point situé aux coordonnées x et y.
x et y peuvent être des nombres sans unités, des pourcentages, ou des nombres suivis d'une unité de dimension. Ces différentes possibilités ne sont pas mixables : les deux valeurs doivent être exprimées dans la même unité.

Le résultat est exprimé en radians, et situe dans l'intervalle de -3,14159rad à +3,14159rad, soit en degrés, de -180deg à +180deg.

Le calcul effectué par atan2(y,x) est équivalent à atan(y / x) mais les résultats de ces deux expressions peuvent néanmoins être différents lorsque x et/ou y ont des valeurs négatives ou lorsque x vaut 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`	`Erreur`	`1,57rad (90deg)`

Compatibilité et prise en charge par les navigateurs.

Les fonctions de calcul trigonométrique sont maintenant bien traitées par tous les navigateurs actuels.

Colonne 1

Traitement correct par les navigateurs de la fonction trigonométrique cos() (cosinus d'un angle).

Colonne 2

Traitement correct par les navigateurs de la fonction trigonométrique sin() (sinus d'un angle).

Colonne 3

Traitement correct par les navigateurs de la fonction trigonométrique tan() (tangente d'un angle).

Colonne 4

Traitement correct par les navigateurs de la fonction trigonométrique acos() (arc cosinus d'une valeur).

Colonne 5

Traitement correct par les navigateurs de la fonction trigonométrique asin() (arc sinus d'une valeur).

Colonne 6

Traitement correct par les navigateurs de la fonction trigonométrique atan() (arc tangente d'une valeur).

Colonne 7

Traitement correct par les navigateurs de la fonction trigonométrique atan2() (arc tangente à partir de deux valeurs).

Fonction
cos()

Fonction
sin()

Fonction
tan()

Fonction
acos()

Fonction
asin()

Fonction
atan()

Fonction
atan2()

Estimation de la prise en charge globale.

92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique des fonctions trigonométriques.

Module CSS - Valeurs et unités - Niveau 4

Concernant cos(). Les fonctions de calcul trigonométrique sont introduite dans ce niveau 4 de la spécification.

14 Août 2018
Document de travail.

Voir aussi : autres fonctions de calcul.

Les fonctions de calcul disponibles en CSS sont de plus en plus nombreuses. Elles couvrent les calculs mathématiques et trigonométriques courants. Pour une description plus détaillée de ces fonctions, vous pouvez vous reporter à la spécification du W3C (en anglais) module CSS - Valeurs et unités.

Propriétés :

⚠

interpolate-size

Définit si les animations ou les transitions doivent être brutales ou progressives lorsqu'un mot clé définissant une dimension intrinsèque est utilisé.

Fonctions :

abs()

Calcule la valeur absolue d'un nombre.

acos()

Calcule l'angle dont le cosinus vaut la valeur indiquée.

asin()

Calcule l'angle dont le sinus vaut la valeur indiquée.

atan()

Calcule l'angle dont la tangente vaut la valeur indiquée.

atan2()

Calcule l'angle entre l'axe des abscisses et la droite reliant le point origine au point indiqué.

attr()

Renvoie la valeur d'un attribut (standard ou personnalisé) du code HTML ou XML.

calc()

Effectue un calcul. Peut être utilisé à la place d'une valeur pour une propriété.

⚠

calc-size()

calc-size() permet de faire des calculs sur la dimension intrinsèque d'un élément (définie par le contenu).

clamp()

Calcule une valeur entre deux valeurs extrêmes. Cette fonction est intéressante lorsque les unités des paramètres sont différentes, mais de même nature (dimensions, angle...).

cos()

Calcul le cosinus d'un angle.

exp()

Calcule l'exponentielle d'un nombre.

hypot()

Calcule la racine carrée d'une somme de carrés de nombres.

⚠

if()

Cette fonction permet de sélectionner une valeur parmi une liste proposée, chaque valeur étant associée à une condition.

log()

Calcule le logarithme d'un nombre.

max()