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

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

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

可能的值

函数 sin（angle）只能将单个值作为参数。

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

返回值

任何角度的正弦值总是在 -1 到 1 的范围内给出一个值。

如果角度为无穷大、-无穷大或 NaN，则结果为 NaN。
如果角度为 0-，则结果为 0-。

语法


sin( <calc-sum> )

CSS sin（） - 基本示例

在以下示例中，.sin-box div 的宽度和高度是使用 calc（）函数内的 sin（）计算的。


	
<html>
<head>
<style>
	 	body {
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 200vh;
	 	 	 margin: 0;
	 	 	 font-size:20px;
	 	}
	 	.sin-box1 {
	 	 	 width: calc(sin(30deg) * 100px);
	 	 	 height: calc(sin(30deg) * 100px);
	 	 	 background-color: lightblue;
	 	 	 margin-right:10px;
	 	}
	 	.sin-box2 {
	 	 	 width: calc(sin(60deg) * 100px);
	 	 	 height: calc(sin(60deg) * 100px);
	 	 	 background-color: lightgray;
	 	 	 margin-right:10px;
	 	}
	 	.sin-box3 {
	 	 	 width: calc(sin(90deg) * 100px);
	 	 	 height: calc(sin(90deg) * 100px);
	 	 	 background-color: lightgreen;
	 	 	 margin-right:10px;
	 	}
</style>
</head>
<body>
	 	<div class="sin-box1">1</div>
	 	<div class="sin-box2">2</div>
	 	<div class="sin-box3">3</div>
</body>
</html>

<< CSS 函数 - cos() CSS 函数 - round() >>