`exp()` CSS-Funktion

Baseline 2023

Neu verfügbar

Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die exp() CSS Funktion ist eine Exponentialfunktion, die eine Zahl als Argument akzeptiert und die mathematische Konstante e hoch 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) zurückgibt.

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 auf ein <number> aufgelöst wird. Stellt den Wert dar, der um eine Potenz von e erhöht werden soll.

Rückgabewert

Gibt eine nicht-negative <number> zurück, die e^number darstellt, das Ergebnis der Berechnung von e hoch der Potenz von number.

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

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

Die exp()-Funktion kann nützlich für Strategien wie die CSS-Modularskala sein, die alle Schriftgrößen auf einer Seite in einem festen Verhältnis zueinander 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 */
}