CSS 函数 - cos()

CSS 函数cos()是一个三角运算，它计算给定数字的余弦，并返回一个介于-1到1之间的结果。

此函数执行单个计算，将输入解释为弧度，输出可以是<number>或<angle>。

可能的值

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

angle - 一个计算结果为<number>或<angle>的表达式。当使用无单位数字时，应将其理解为表示一的弧度。

返回值

角度的余弦值始终在-1到1的范围内。

如果angle为infinity、-infinity或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>

打印页面