`sin()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

Die sin() CSS Funktion ist eine trigonometrische Funktion, die den Sinus eines Wertes liefert, welcher zwischen -1 und 1 liegt. Die Funktion enthält eine einzige Berechnung, die entweder zu einer <number> oder einem <angle> führen muss, indem das Ergebnis des Arguments als Bogenmaß interpretiert wird. Das heißt, sin(45deg), sin(0.125turn) und sin(3.14159 / 4) repräsentieren alle denselben Wert, 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

css

/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

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

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

Parameter

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

angle: Eine Berechnung, die zu einer <number> oder einem <angle> führt. Bei der Angabe von zahlenlosen Werten werden diese als Anzahl von Bogenmaßen interpretiert, die einen <angle> darstellen.

Rückgabewert

Der Sinus eines angle wird immer eine Zahl zwischen −1 und 1 zurückgeben.

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

Formale Syntax

<sin()> = 
  sin( <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

Veränderung der Box-Größen

In diesem Beispiel wird sin(30deg) 0.5 zurückgeben, sodass die Box eine Breite und Höhe von 50px hat.

css

div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}

Steuerung der Animationsdauer

Ein weiterer Anwendungsfall ist die Steuerung der animation-duration, wobei die Dauer basierend auf dem Sinuswert reduziert wird. In diesem Fall wird die Animationsdauer 1s betragen.

css

div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

sin() CSS-Funktion

Help improve MDN

`sin()` CSS-Funktion