在 CSS 中計算正弦、餘弦、正切等。
三角函數
在 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
元件。