The exp()
CSS function is an exponential function that takes an number as an argument and returns the mathematical constant e
raised to the power of the given number.
The mathematical constant e is the base of natural logarithms, and is approximately 2.718281828459045
.
The exp(number)
function contains a calculation which returns the same value as pow(e, number)
.
Syntax
/* 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
The exp(number)
function accepts only one value as its parameter.
number
-
A calculation which resolves to a
number()
. Representing the value to be raised by a power ofe
.
Return value
Returns a non-negative number()
representing enumber, which is the result of calculating e
raised to the power of number
.
- If
number
is-Infinity
, the result is0
. - If
number
is0
, the result is1
. - If
number
is1
, the result ise
(i.e.2.718281828459045
). - If
number
isInfinity
, the result isInfinity
.
Examples
Rotate elements
The exp()
function can be used to rotate
elements as it return a number()
.
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
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 }
Scale headings by fixed ratio
The exp()
function can be useful for strategies like CSS modular scale, which relates all the font-sizes on a page to each other by a fixed ratio.
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
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 }