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 軸上進行轉譯,而不是以各自的圓心為中心旋轉,然後向外移動。系統會根據 --anglecos()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() 函式會計算從一個點到另一個點的相對角度。這個函式會接受兩個以半形逗號分隔的值做為參數:相對於位於原點 0,0 的起始點,另一個點的 yx 位置。

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

在以下範例中,方塊會旋轉,以便面向滑鼠的位置。透過 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() 顏色函式sl 元件。