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>

列印頁面