在 CSS 中計算正弦、餘弦、正切等值。
三角函數
在 CSS 中,您可以編寫數學運算式。基礎是 calc()
函式來執行計算,但您可能也聽過 min()
、max()
和 clamp()
。
彙整這些函式為 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
和 atan2()
。這些函式是在 CSS 值和單元層級 4 中定義,適用於所有瀏覽器。
sin()
、cos()
和tan()
核心三個 trig 函式為:
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()
的 arc 或 inverse 代表分別為 asin()
、acos()
和 atan()
。這些函式會以相反方向進行計算:這些函式會使用數值做為引數,並傳回其對應角度。
最後,atan2()
可接受兩個引數 A
和 B
。函式會傳回正 X 軸與 (B,A)
點之間的角度,
範例
這些函式的用途有很多。接下來的提案只是少數幾個選項。
沿著中心點以圓形路徑移動項目
在以下示範中,圓點圍繞在某個中心點。系統會在 X 軸和 Y 軸上轉譯每個圓點,而不是將每個點旋轉並移開,X 軸和 Y 軸的距離取決於 cos()
和 --angle
的 sin()
。
: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 設計的 Möbius 動畫條所述,cos()
和 sin()
可用於翻譯以外的其他用途。這裡的結果可用來操控 hsl()
顏色函式的 s
和 l
元件。