CSS 函数

CSS 函数 cos() 是一个三角函数，它计算给定数字的余弦并返回 -1 到 1 范围内的结果。

此函数执行单个计算，输入参数作为弧度，输出可以是 <number> 或 <angle> .

可能的值

cos(angle) 函数仅接受单个值作为其参数。

  • angle - 生成 <number> 或 <angle> 的计算结果。当使用无单位数字时，它们应被理解为表示一的弧度。

返回值

角度的余弦值始终给出以下值:范围 -1 到 1。

  • 如果角度为无穷大、负无穷大或 NaN，结果将为 NaN。

语法

cos( <calc-sum> )

CSS cos(): 基本示例

在以下示例中，cos() 函数在 calc() 函数中使用确定旋转缩放矩形元素的宽度、高度和边距。

<html>
<head>
<style>
   div.original-rectangle {
      width: 150px;
      height: 100px;
      background-color: orange;
      margin-bottom: 30px;
   }
   div.rotated-rectangle {
      width: 150px;
      height: 100px;
      background-color: yellow;
      transform: rotate(25deg);
   }
   div.rotated-scaled-rectangle {
      width: calc(120px * cos(25deg));
      height: calc(70px * cos(25deg));
      margin: calc(40px * cos(25deg));
      transform: rotate(25deg);
      transform-origin: center;
      background-color: pink;
   }
</style>
</head>
<body>
<div class="original-rectangle"></div>
<div class="rotated-rectangle"></div>
<div class="rotated-scaled-rectangle"></div>
</body>
</html>