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)

技術的詳細

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：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() 函数