sin()

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS 函数 sin() 为三角函数，返回某数的正弦值，此值介于 -1 和 1 之间。此函数含有单个计算式，此式须将参数结果按弧度数解析为 <number> 或 <angle>，即 sin(45deg)、sin(0.125turn) 和 sin(3.14159 / 4) 均表示同一值，约为 0.707。

语法

css
/* 单个 <angle> 值 */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/* 单个 <number> 值 */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/* 其他值 */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

参数

sin(angle) 函数仅接受一值作为其参数。

angle

解析为 <number> 或 <angle> 的计算式。指定无单位数时，数理解为弧度数，表示 <angle>。

返回值

angle 的正弦值总将返回介于 −1 和 1 之间的数。

  • 若 angle 为 infinity、-infinity 或 NaN，则结果为 NaN。
  • 若 angle 为 0⁻，则结果为 0⁻。

形式语法

<sin()> = 
  sin( <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

示例

改变盒子尺寸

在此示例中，sin(30deg) 将返回 0.5，使盒子有 50px 的宽度和 50px 的高度。

css
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}

控制动画时长

另一用例为控制 animation-duration，根据正弦值减少时长。在此示例中，动画时长将为 1s。

css
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}

规范

Specification
CSS Values and Units Module Level 4
# trig-funcs

浏览器兼容性

BCD tables only load in the browser

参见