CSS cos() 関数

定義と使用方法

CSSの cos() 関数は角度の余弦値を返します。

角度の余弦値は常に -1 から 1 までの数字を返します。

例

使用 cos() 回転ボックスのサイズを保つ：

div.c {
  width: calc(120px * cos(25deg));
  height: calc(120px * cos(25deg));
  margin: calc(120px/4 * cos(25deg));
  background-color: maroon;
  transform: rotate(25deg);
  transform-origin: center;
  translate: -10px 10px;
}

実際に試してみる

CSS 语法

cos(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 exp() 関数

参考：CSS hypot() 関数

参考：CSS log() 関数

参考：CSS mod() 関数

参考：CSS pow() 関数

参考：CSS sin() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数