CSS 函数 - cos()_CSS 菜鸟教程

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

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

可能的值

函数 cos（angle）只接受一个值作为其参数。

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

返回值

角度的余弦值总是在 -1 到 1 的范围内。

如果角度是无穷大、-无穷大或 NaN，则结果将是 NaN。

语法


 cos( <calc-sum> )

CSS cos（） - 基本示例

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


	
<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>

<< CSS 函数 - tan() CSS 函数 - sin() >>