CSS 的三角函式

在 CSS 中計算正弦、餘弦、正切等。

Bramus

三角函數

在 CSS 中，您可以編寫數學運算式。在基礎層級，calc() 函式會執行計算，但您很可能也聽過 min()、max() 和 clamp()。

這些函式會與三角函式 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 結合。這些函式是由 CSS 值和單元單元層級 4 所定義，適用於所有瀏覽器。

sin()、cos()和tan()

三個核心三角函式如下：

• cos()：傳回角度的餘弦，即 -1 與 1 之間的值。
• sin()：傳回角度的正弦，該值介於 -1 和 1 之間。
• tan()：傳回角度的正切值，介於 −∞ 和 +∞ 之間。

與 JavaScript 中的對應函式不同，這些函式可接受角度和弧度做為引數。

在以下示範中，這些函式可用來繪製組成 --angle 集周圍三角形的線條：

• 「斜邊」(黃色線)是從圓心到圓點的線，其長度等於圓形的 --radius。
• 「相鄰」(紅線)是從圓心沿著 X 軸的線條。其長度等於 --radius 乘以 --angle 的餘弦。
• 「相反」(藍線)是從圓點中心沿著 Y 軸的線條。其長度等於 --radius 乘以 --angle 的正弦。
• --angle 的 tan() 函式用於從點向 X 軸繪製綠線。

asin()、acos()、atan()和atan2()

sin()、cos() 和 tan() 的弧形或反向對應值分別為 asin()、acos() 和 atan()。這些函式會以相反方向執行計算：以數值做為引數，並傳回相應的角度。

最後是 atan2()，可接受兩個引數 A 和 B。這個函式會傳回正 X 軸與點 (B,A) 之間的角度。

範例

這些函式的用途有很多。以下是其中幾個精選項目。

在圓形路徑上移動項目，並繞著中心點移動

在以下示範中，圓點圍繞著中心點。每個點都會在 X 軸和 Y 軸上轉譯，而不是讓每個圓點自行旋轉中心點再向外移動。系統會根據 --angle 的 cos() 和 sin() 分別決定 X 軸和 Y 軸的距離。

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

為了讓圓點均勻分布在中心點周圍，系統會根據 nth-child 索引為每個圓點額外提供偏移量。舉例來說，如果有三個點，每個點之間的距離為 120deg (= 360deg / 3)。

• 三個子元素中的第一個子元素會偏移 0 x 120deg = 0deg。
• 三個子元素中的第二個子元素會偏移 1 x 120deg = 120deg。
• 三個子項元素 (共三個) 會偏移 2 x 120deg = 240deg。

旋轉元素，使其朝向原點

atan2() 函式會計算從一個點到另一個點的相對角度。此函式接受兩個逗號分隔值做為參數：另一個點的 y 和 x 位置 (相對於位於原始 0,0 的原點)。

有了計算值，您就可以使用個別轉換屬性旋轉元素，讓元素互相對齊。

以下範例將說明方塊如何旋轉，使其面對滑鼠的位置。透過 JavaScript 將滑鼠位置同步至自訂屬性。

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

社群精選內容

如Ana Tudor 製作的動畫莫比烏斯環所示，cos() 和 sin() 不僅可用於翻譯，這裡的結果會用來操控 hsl() 顏色函式的 s 和 l 元件。