CSS 函式 - cos()

CSS 函式cos()是一個三角運算，它計算給定數字的餘弦，並返回一個介於-1到1之間的結果。

此函式執行單個計算，將輸入解釋為弧度，輸出可以是<number>或<angle>。

可能的值

cos(angle)函式僅接受單個值作為其引數。

angle - 一個計算結果為<number>或<angle>的表示式。當使用無單位數字時，應將其理解為表示一的弧度。

返回值

角度的餘弦值始終在-1到1的範圍內。

如果angle為infinity、-infinity或NaN，則結果將為NaN。

語法

cos( <calc-sum> )

CSS cos() - 基本示例

在以下示例中，cos()函式用於calc()函式中以確定旋轉縮放矩形元素的寬度、高度和邊距。

 
<html>
<head>
<style>
   div.original-rectangle {
      width: 150px;
      height: 100px;
      background-color: orange;
      margin-bottom: 30px;
   }
   div.rotated-rectangle {
      width: 150px;
      height: 100px;
      background-color: yellow;
      transform: rotate(25deg);
   }
   div.rotated-scaled-rectangle {
      width: calc(120px * cos(25deg));
      height: calc(70px * cos(25deg));
      margin: calc(40px * cos(25deg));
      transform: rotate(25deg);
      transform-origin: center;
      background-color: pink;
   }
</style>
</head>
<body>
<div class="original-rectangle"></div>
<div class="rotated-rectangle"></div>
<div class="rotated-scaled-rectangle"></div>
</body>
</html>

列印頁面