cos()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
Die cos()
CSS Funktion ist eine trigonometrische Funktion, die den Kosinus einer Zahl zurückgibt, was ein Wert zwischen -1
und 1
ist. Die Funktion enthält eine einzelne Berechnung, die als Ergebnis entweder eine <number>
oder ein <angle>
haben muss, indem sie das Ergebnis des Arguments als Radiant interpretiert. Das bedeutet, 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 #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));
}
Syntax
/* 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 cos(angle)
-Funktion akzeptiert nur einen Wert als Parameter.
Rückgabewert
Der Kosinus eines angle
wird immer eine Zahl zwischen −1
und 1
zurückgeben.
- Wenn
angle
infinity
,-infinity
oderNaN
ist, ist das ErgebnisNaN
.
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
>Beibehalten der Größe eines gedrehten Kastens
Die cos()
-Funktion kann verwendet werden, um die Größe eines gedrehten Kastens beizubehalten.
Wenn das Element mit rotate()
gedreht wird, überschreitet es seine ursprüngliche Größe. Um dies zu beheben, verwenden wir cos()
, um die Elementgröße zu aktualisieren.
Wenn Sie beispielsweise ein Quadrat von 100px
/100px
um 45deg
drehen, wird der entstehende Diamant breiter und höher als das ursprüngliche Quadrat. Um den Diamanten in die Box einzupassen, die dem ursprünglichen Quadrat zugewiesen wurde, muss der Diamant mit dieser Formel verkleinert werden: 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
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>
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> |
Browser-Kompatibilität
Loading…