CSS 的三角函式

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

三角函式

在 CSS 中,您可編寫數學運算式。基礎為 calc() 函式進行計算,但您可能也聽過 min()max()clamp()

彙整這些函式是三角函式 sin()cos()tan()asin()acos()atan() 以及 atan2()。這些函式是由 CSS 值和單元單元層級 4 所定義,適用於所有瀏覽器。

瀏覽器支援

  • Chrome:111.
  • Edge:111。
  • Firefox:108。
  • Safari:15.4。

資料來源

sin()cos()tan()

三項核心函式如下:

  • cos():傳回角度的餘弦,即 -11 之間的值。
  • sin():傳回角度的正弦,即 -11 之間的值。
  • tan():傳回角度的正切,也就是 −∞+∞ 之間的值。

與 JavaScript 對應項目不同,這些函式接受角度和弧度做為引數。

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

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

asin()acos()atan()atan2()

sin()cos()tan()反轉反向對應分別為 asin()acos()atan()。這類函式會以相反方向進行計算,也就是使用數值做為引數,並傳回對應角度。

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

範例

這些函式的用途有很多。以下簡單來說,吧!

移動中心點環狀路徑上的項目

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

: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() 函式會計算不同點之間的相對角度。此函式接受兩個逗號分隔值做為參數:另一個點的 yx 位置 (相對於位於原始 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 的 Möbius 系列作品所示,cos()sin() 的用途不僅止於翻譯,此處的結果可用來操控 hsl() 顏色函式sl 元件。