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 akzeptiert und die mathematische Konstante e potenziert mit dieser Zahl zurückgibt.

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

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

Syntax

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

Parameter

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

number

Eine Berechnung, die sich zu einer <number> auflöst und den Wert darstellt, der mit der Potenz von e potenziert wird.

Rückgabewert

Gibt eine nicht-negative <number> zurück, die enumber repräsentiert, das Ergebnis der Berechnung von e potenziert mit der Zahl.

  • 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 rotieren

Die exp() Funktion kann verwendet werden, um Rotationen von Elementen durchzuführen, 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

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 skalieren mit festem Verhältnis

Die exp() Funktion kann nützlich für Strategien wie CSS Modular Scale sein, die alle Schriftgrößen auf einer Seite durch ein festes Verhältnis zueinander 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

BCD tables only load in the browser

Siehe auch