`exp()` CSS-Funktion

Baseline

Weitgehend verfügbar

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

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die exp() CSS Funktion ist eine exponentielle Funktion, die eine Zahl als Argument akzeptiert und die mathematische Konstante e potenziert mit der gegebenen 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) liefert.

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 Parameter.

number: Eine Berechnung, die zu einer <number> aufgelöst wird. Sie repräsentiert den Wert, der potenziert mit e werden soll.

Rückgabewert

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

Die exp()-Funktion kann verwendet werden, um Elemente zu rotieren, 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 für Strategien wie den CSS-Modular-Scale sein, die alle Schriftgrößen auf einer Seite nach einem festen Verhältnis zueinander 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 */
}