CSS 函数 - sin()

CSS 函数sin()是一个三角函数运算，它计算给定数字的正弦值，并返回一个介于-1到1之间的结果。

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

可能的值

sin(angle)函数只能接受单个值作为参数。

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

返回值

任何角度的正弦值始终在-1到1之间。

如果angle为infinity、-infinity或NaN，则结果为NaN。
如果angle为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>

打印页面