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 um die gegebene Zahl zurückgibt.

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

Die Funktion exp(number) enthält eine Berechnung, die den gleichen 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 ihren Parameter.

number

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

Rückgabewert

Gibt eine nicht-negative <number> zurück, die enumber darstellt, was das Ergebnis der Berechnung von e potenziert um die Zahl 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 rotieren

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

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 für Strategien wie CSS modular scale nützlich sein, die alle Schriftgrößen auf einer Seite miteinander durch ein festes Verhältnis in Beziehung setzen.

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