CSS sin() 函數

定義和用法

CSS 的 sin() 函數返回一個數字(角度)的正弦值。

角度的正弦值總是返回一個介于 -1 和 1 之間的值。

實例

calc() 函數中使用 sin() 來設置三個 <div> 元素的寬度和高度:

div.a {
  width: calc(sin(0.25turn) * 120px);
  height: calc(sin(30deg) * 120px);
  background-color: salmon;
  margin-bottom: 25px;
}
div.b {
  width: calc(sin(90) * 120px);
  height: calc(sin(2*1.125) * 120px);
  background-color: green;
  margin-bottom: 25px;
}
div.c {
  width: calc(sin(pi/2) * 120px);
  height: calc(sin(pi/2) * 120px);
  background-color: maroon;
}

親自試一試

CSS 語法

sin(angle)
描述
angle 必需。計算結果為數字或角度的表達式。

技術細節

版本: CSS4

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
111 111 108 15.4 97

相關頁面

參考:CSS acos() 函數

參考:CSS asin() 函數

參考:CSS atan() 函數

參考:CSS atan2() 函數

參考:CSS calc() 函數

參考:CSS cos() 函數

參考:CSS exp() 函數

參考:CSS hypot() 函數

參考:CSS log() 函數

參考:CSS mod() 函數

參考:CSS pow() 函數

參考:CSS sqrt() 函數

參考:CSS tan() 函數