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.
exp()
CSS 関数は指数関数で、引数として数値を取り、その数値で数学定数 e
を累乗した値を返します。
数学定数 e は自然対数の底で、約 2.718281828459045
です。
exp(number)
関数は計算を含み、pow(e, number)
と同じ値を返します。
構文
css
/* <number> 値 */
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 */
引数
返値
返値は非負の <number>
で、enumber、つまり e を number
乗した値になります。
number
が-Infinity
の場合、結果は0
になります。number
が0
の場合、結果は1
になります。number
が1
の場合、結果はe
(すなわち2.718281828459045
)になります。number
がInfinity
の場合、結果はInfinity
になります。
形式文法
例
要素を回転させる
exp()
関数は <number>
を返すため、要素の回転(rotate
)に使用できます。
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
}
結果
固定比率で見出しを拡大する
exp()
関数は、ページ上のすべてのフォントサイズを固定比率で関連付ける CSS モジュラースケールのような戦略に役立ちます。
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
}
結果
仕様書
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |
ブラウザーの互換性
BCD tables only load in the browser