CSS 函数

CSS 函数 sin() 是一个三角函数，它计算给定数字的正弦并返回 -1 到 1 范围内的结果。

该函数执行单个计算，解释输入作为弧度，输出可以是 <number> 或 <angle> .

可能的值

sin(angle) 函数只能采用单个值作为参数。

  • angle - 产生 <number> 或 <angle> 的计算。当使用无单位数字时，它们被解释为弧度并表示 <angle>。

返回值

任何角度的正弦值始终给出以下值:范围 -1 到 1。

  • 如果角度为无穷大、负无穷大或 NaN，则结果为 NaN。

  • 如果角度为 0-，则结果为 0-。

语法

sin( <calc-sum> )

CSS sin() - 基本示例

在以下示例中，.sin-box div 的宽度和高度是使用 calc() 函数内的 sin() 计算的。

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200vh;
      margin: 0;
      font-size:20px;
   }
   .sin-box1 {
      width: calc(sin(30deg) * 100px);
      height: calc(sin(30deg) * 100px);
      background-color: lightblue;
      margin-right:10px;
   }
   .sin-box2 {
      width: calc(sin(60deg) * 100px);
      height: calc(sin(60deg) * 100px);
      background-color: lightgray;
      margin-right:10px;
   }
   .sin-box3 {
      width: calc(sin(90deg) * 100px);
      height: calc(sin(90deg) * 100px);
      background-color: lightgreen;
      margin-right:10px;
   }
</style>
</head>
<body>
   <div class="sin-box1">1</div>
   <div class="sin-box2">2</div>
   <div class="sin-box3">3</div>
</body>
</html>