exp()

Baseline 2023

Newly available

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

Die exp() CSS Funktion ist eine Exponentialfunktion, die eine Zahl als Argument nimmt und die mathematische Konstante e potenziert mit der gegebenen Zahl zurückgibt.

Die mathematische Konstante e ist die Basis der natürlichen Logarithmen und ist ungefähr 2.718281828459045.

Die exp(number)-Funktion enthält eine Berechnung, die denselben Wert zurückgibt wie pow(e, number).

Syntax

css

/* A <number> value */
width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36.8px */
width: calc(100px * exp(0)); /* 100px * 1 = 100px */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 271.8px */

Parameter

Die exp(number)-Funktion akzeptiert nur einen Wert als ihren Parameter.

number: Eine Berechnung, die sich zu einer <number> auflöst. Repräsentiert den Wert, der mit der Potenz von e potenziert wird.

Rückgabewert

Gibt eine nicht-negative <number> zurück, die e^number darstellt, was das Ergebnis der Berechnung e potenziert mit der Zahl number ist.

Wenn number -Infinity ist, ist das Ergebnis 0.
Wenn number 0 ist, ist das Ergebnis 1.
Wenn number 1 ist, ist das Ergebnis e (d.h. 2.718281828459045).
Wenn number Infinity ist, ist das Ergebnis Infinity.

Formale Syntax

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

Elemente drehen

Die exp()-Funktion kann verwendet werden, um Elemente mit rotate zu drehen, da sie eine <number> zurückgibt.

HTML

html

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

CSS

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

css

div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); /* 0.3678794411714423turn */
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); /* 0.4723665527410147turn */
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); /* 0.6065306597126334turn */
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); /* 0.7788007830714049turn */
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); /* 1turn */
}

Ergebnis

Überschriften nach festem Verhältnis skalieren

Die exp()-Funktion kann nützlich sein für Strategien wie den CSS-modularen Maßstab, der alle Schriftgrößen auf einer Seite durch ein festes Verhältnis miteinander in Beziehung setzt.

HTML

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

CSS

css

h1 {
  font-size: calc(1rem * exp(1.25)); /* 3.4903429574618414rem */
}
h2 {
  font-size: calc(1rem * exp(1)); /* 2.718281828459045rem */
}
h3 {
  font-size: calc(1rem * exp(0.75)); /* 2.117000016612675rem */
}
h4 {
  font-size: calc(1rem * exp(0.5)); /* 1.6487212707001282rem */
}
h5 {
  font-size: calc(1rem * exp(0.25)); /* 1.2840254166877414rem */
}
h6 {
  font-size: calc(1rem * exp(0)); /* 1rem */
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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