Fonction CSS `cos()`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.

La fonction CSS cos() est une fonction trigonométrique qui retourne le cosinus d'un nombre, qui est une valeur comprise entre -1 et 1. La fonction contient un seul calcul qui doit se résoudre soit en un nombre (<number>), soit en un angle (<angle>) en interprétant le résultat de l'argument comme des radians. Ainsi, cos(45deg), cos(0.125turn) et cos(3.14159 / 4) représentent tous la même valeur, environ 0.707.

Exemple interactif

transform: translateX(calc(cos(0deg) * 140px))
  translateY(calc(sin(0deg) * -140px));

transform: translateX(calc(cos(90deg) * 140px))
  translateY(calc(sin(90deg) * -140px));

transform: translateX(calc(cos(135deg) * 140px))
  translateY(calc(sin(135deg) * -140px));

transform: translateX(calc(cos(180deg) * 140px))
  translateY(calc(sin(180deg) * -140px));

transform: translateX(calc(cos(-45deg) * 140px))
  translateY(calc(sin(-45deg) * -140px));

<div class="circle">
  <span class="dot" id="example-element"></span>
</div>

:root {
  --radius: 140px;
  --dot-size: 10px;
}
.circle {
  display: grid;
  place-content: center;
  margin: 0 auto;
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-image:
    radial-gradient(black var(--dot-size), transparent var(--dot-size)),
    linear-gradient(135deg, blue, deepskyblue, lightgreen, lavender, honeydew);
}
.dot {
  display: block;
  width: var(--dot-size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #666666;
  background-color: #ff6666;
  transform: translateX(calc(cos(0deg) * var(--radius)))
    translateY(calc(sin(0deg) * var(--radius) * -1));
}

Syntaxe

css

/* Valeurs <angle> uniques */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));

/* Valeurs <number> uniques */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));

/* Autres valeurs */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));

Paramètres

La fonction cos(angle) n'accepte qu'une seule valeur comme paramètre.

angle: Un calcul qui se résout en un nombre (<number>) ou un angle (<angle>). Lors de la spécification de nombres sans unité, ils sont interprétés comme un nombre de radians, représentant un angle (<angle>).

Valeur de retour

Le cosinus d'un angle renverra toujours un nombre compris entre −1 et 1.

Si angle est infinity, -infinity ou NaN, le résultat est NaN.

Syntaxe formelle

<cos()> = 
  cos( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Exemples

Conserver la taille d'une boîte pivotée

La fonction cos() peut être utilisée pour conserver la taille d'une boîte pivotée.

Lorsque l'élément est pivoté en utilisant rotate(), il dépasse sa taille initiale. Pour corriger cela, nous utilisons cos() pour mettre à jour la taille de l'élément.

Par exemple, si vous faites pivoter un carré de 100px/100px de 45deg, le losange qu'il crée est plus large et plus haut que le carré original. Pour réduire le losange dans la boîte allouée pour le carré original, vous devez réduire le losange en utilisant cette formule : width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px. Vous devez également ajuster le transform-origin et ajouter translate() pour corriger la position :

HTML

html

<div class="carre-original"></div>
<div class="diamand-pivote"></div>
<div class="diamand-pivote-redimensionne"></div>

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

css

div.carre-original {
  width: 100px;
  height: 100px;
  background-color: blue;
}
div.diamand-pivote {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
div.diamand-pivote-redimensionne {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
  margin: calc(100px / 4 * cos(45deg));
  transform: rotate(45deg);
  transform-origin: center;
  background-color: green;
}