cos()

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die cos() CSS Funktion ist eine trigonometrische Funktion, die den Kosinus eines Wertes zurückgibt, welcher zwischen -1 und 1 liegt. Die Funktion enthält eine einzelne Berechnung, die sich entweder zu einem <number> oder einem <angle> auflösen muss, indem das Ergebnis des Arguments als Radiant interpretiert wird. Das heißt, cos(45deg), cos(0.125turn) und cos(3.14159 / 4) stellen alle denselben Wert dar, ungefähr 0.707.

Probieren Sie es aus

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 #666;
  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 #666;
  background-color: #f66;
  transform: translateX(calc(cos(0deg) * var(--radius)))
    translateY(calc(sin(0deg) * var(--radius) * -1));
}

Syntax

css

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

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

/* Other values */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));

Parameter

Die Funktion cos(angle) akzeptiert nur einen Wert als Parameter.

angle: Eine Berechnung, die sich zu einem <number> oder einem <angle> auflöst. Bei der Angabe von einheitenlosen Zahlen werden diese als Anzahl von Radianten interpretiert und stellen somit einen <angle> dar.

Rückgabewert

Der Kosinus eines angle gibt immer eine Zahl zwischen −1 und 1 zurück.

Wenn angle infinity, -infinity oder NaN ist, ist das Ergebnis NaN.

Formale Syntax

<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

Beispiele

Behalten Sie die Größe eines gedrehten Kastens bei

Die cos() Funktion kann verwendet werden, um die Größe eines gedrehten Kastens beizubehalten.

Wenn das Element mittels rotate() gedreht wird, überschreitet es seine ursprüngliche Größe. Um dies zu korrigieren, verwenden wir cos(), um die Größe des Elements zu aktualisieren.

Zum Beispiel, wenn Sie ein 100px/100px Quadrat um 45deg drehen, wird der entstandene Rhombus breiter und höher als das ursprüngliche Quadrat. Um den Rhombus in die für das ursprüngliche Quadrat zugewiesene Box zu verkleinern, müssten Sie den Rhombus mit dieser Formel verkleinern: width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px. Sie müssen auch den transform-origin anpassen und translate() hinzufügen, um die Position zu korrigieren:

HTML

html

<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>

CSS

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

css

div.original-square {
  width: 100px;
  height: 100px;
  background-color: blue;
}
div.rotated-diamond {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
div.rotated-scaled-diamond {
  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;
}

Ergebnis

Spezifikationen

Specification
CSS Values and Units Module Level 4 # trig-funcs